Cambia immagine da prima a dopo (diverse fonti) usando il cursore dell'interfaccia utente jQuery - jquery, jquery-ui, jquery-ui-slider

Sto cercando di cambiare la sorgente IMG sulla slide di Sliderma non così velocemente. Cosa intendo con così veloce? Potrei cambiare l'attributo IMG src al volo sull'evento slide () ma questo è brutto e non lo voglio. Mi piace avere un fadeOut per l'immagine predefinita chiamata before.jpg e fadeIn per l'immagine chiamata after.jpg che deve essere mostrato quando il cursore è alla fine.Ho provato questo codice:

$(document).ready(function(){
$("#slider").slider({
slide: function(event, ui) {
if(ui.value >= 50) {
$("#image-changer").fadeOut("slow");
$("#image-changer").attr("src", "images/after.jpg");
$("#image-changer").fadeIn("slow");
}
}
});
});

ma non funziona perché l'immagine svanisce una volta e una volta perché il valore ui avrà sempre un valore superiore a 50. Qualcuno può aiutarmi a raggiungere questo obiettivo?

risposte:

I metodi di effetti jQuery vengono eseguiti in modo asincrono. È necessario "concatenare" queste chiamate in modo che non vengano eseguite tutte contemporaneamente:

$("#image-changer").fadeOut("slow",
function() {
$("#image-changer").attr("src", "images/after.jpg").fadeIn("slow");
}
);

Il secondo parametro accettato da fadeOut è una funzione chiamata "s quando l'animazione è completa.