problemi jquery opacità con fadein e FadeOut

Question

http://dl.dropbox.com/u/921159/desktopography/index.html

Sto costruendo un blog carta da parati e cercando di utilizzare jQuery per mostrare/nascondere un link di download (io sono un principiante). Il problema è che se si passa con il mouse sopra l'immagine e si lascia che il collegamento si dissolva, quindi passare rapidamente all'indietro e riaccenderlo mentre sta scomparendo ... il collegamento si fermerà all'opacità in cui si trova attualmente. Finisce per essere un problema quando un utente passa casualmente sopra le immagini e l'opacità rimane bloccata a 0. Cosa sta causando?

Answer 1

clearQueue nelle metodo dell'animazione .stop() default false (see API), ma si vuole che sia true perché si vuole l'animazione corrente per cancellare e lo hanno iniziare la nuova animazione stato hover. Modificare il codice come segue:

$(function() { 
    $('.wallpaper').hover(function() { 
     $(this).children('p').stop(true, true).fadeIn(300); 
    }, function() { 
     $(this).children('p').stop(true, true).fadeOut(400); 
    }); 
}); 

Answer 2

Dai uno sguardo al metodo .stop(). È progettato per risolvere questi problemi.

Answer 3

Questa è una conseguenza del fatto che si sta utilizzando stop()^(docs) per fermare l'animazione e invertire tale tendenza. Il problema è che la prossima funzione di dissolvenza ricorda il punto di arresto e la utilizza.

È possibile utilizzare invece fadeTo()^(docs) in modo da poter correggere gli obiettivi di opacità a 1 e 0.

$('.wallpaper').hover(function() { 
    $(this).children('p').stop().fadeTo(300, 1); 
}, function() { 
    $(this).children('p').stop().fadeTo(400 ,0); 
}); 

---

EDIT: L'equivalente usando animate()^(docs) è:

$('.wallpaper').hover(function() { 
    $(this).children('p').stop().animate({opacity:1}, 300); 
}, function() { 
    $(this).children('p').stop().animate({opacity:0}, 400); 
}); 

noti che nessuno di questi sarà impostato display:none alla fine. Se lo vuoi, dovrai farlo manualmente.

$('.wallpaper').hover(function() { 
    $(this).children('p').show().stop().fadeTo(300, 1); 
}, function() { 
    $(this).children('p').stop().fadeTo(400 ,0, function(){$(this).hide()}); 
}) 
    .children('p').css('opacity',0);