javascript - 前置淡出过渡

Question

我想为我的 prepend() 函数做一个转换。每次在 #instafeed div 中添加一个项目时，它应该先淡出，然后添加，最后淡入。目标是使添加过渡尽可能平滑，因此在项目再次淡入之前，用户看不到项目的变化。

问题是即使设置了时间，项目的变化也在淡出之前发生。

需要: 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

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

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