prepend fadeOut过渡

Question

我想为我的prepend()功能进行转换。每次一个项目被放在#instafeed div中时，它应该首先淡出，然后是前置，最后它会淡入。目的是使前置过渡尽可能平滑，这样用户可以＆＃39 ; t看到项目更改，直到它再次淡入。

问题在于，即使设置时间，项目更改也会在淡出之前发生。

通缉： fadeOut ==> prepend ==> fadeIn

发生了什么： prepend ==> fadeOut ==> fadeIn

$(function($){  
    $('.thebutton').click(function(){
        $('#instafeed').fadeOut(3000).prepend($('#instafeed div:last')).fadeIn(3000);
    });

    setInterval( function(){
        $('.thebutton').trigger('click');
    }, 9000);   
}); 

我该怎么办？

Answer 1

您需要在prepend()的回调中执行fadeIn()和fadeOut()，以便在动画结束时执行它们。试试这个：

$('.thebutton').click(function(){
    $('#instafeed').fadeOut(3000, function() {
        $(this).prepend($('#instafeed div:last')).fadeIn(3000)
    });
});

Answer 2

应该在回调函数中调用

：

$('#instafeed').fadeOut(3000, function(){
   $(this).prepend($('#instafeed div:last')).fadeIn(3000);
});

Answer 3

使用fadeout

的回调处理程序

$('#instafeed').fadeOut(3000, function(){

   $( this ).prepend( $('#instafeed div:last') ).fadeIn(3000);

});