准备渐变输出转换

prepend fadeOut transition

本文关键字：转换 输出 渐变      更新时间：2023-09-26

我想为prepend()函数进行转换。每次在#instafeeddiv中预处理项目时，都应该先淡出，然后预处理，最后再淡入。目的是使预处理过渡尽可能平滑，这样用户在再次淡入之前就看不到项目的变化。

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

通缉犯：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);   
});

我该怎么办？

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

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

应该在回调函数中调用：

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

使用淡出的回调处理程序

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