jQuery:如何在执行代码之前等待fadeTo(或任何其他效果）完成

jQuery: How to wait until fadeTo(or any other effect) finishes before executing code

本文关键字：任何 其他 完成 fadeTo 等待 执行 代码 jQuery      更新时间：2023-09-26

我正在制作一个新闻板，它可以淡入淡出新闻。当元素淡出时，内容会被删除，当它淡出时，会有新的内容出现。这是有效的，只是时间不对。只有当旧内容消失时才应该出现的新内容，会随着元素的消失而出现。有没有办法等到这件事完成？

$(document).ready(function() {
    var counter = 0;
    var slides = ['<p>Track All of Your enemys Using The <span>Scout Tool!</span></p>',
                    '<p>Download powerups Using The <span>Pirate Tool!</span></p>',
                    '<p>Gather Badges To Attack others in <span>Raids!</span></p>',
                    '<p>Enjoy Orgainzing Your Profile <span>Join Now!</span></p>'];
    $('#slide-left').click(function() {
        $('#slide').fadeTo('fast', 0);
        $('#slide p').remove();
        if (counter > 0){counter --;}
        $('#slide').append(slides[counter]);
        $('#slide').fadeTo('fast', 1);
    });
    $('#slide-right').click(function() {
        $('#slide').fadeTo('fast', 0);
        $('#slide p').remove();
        if (counter < (slides.length-1)){counter ++;}
        $('#slide').append(slides[counter]);
        $('#slide').fadeTo('fast', 1);
    });
});

fadeTo接受第三个参数，即回调函数。这在动画完成时调用。所以你总是可以做这样的事情：

$('#slide').fadeTo('fast', 1, function() {
    // This part is executed after fade
});

您可以进行

$('#slide').fadeTo('fast', 0,function(){
     $('#slide p').remove();
     if (counter > 0){counter --;}
     $('#slide').append(slides[counter]).fadeTo('fast', 1);
});

$(document).ready(function() {
    var counter = 0;
    var slides = ['<p>Track All of Your enemys Using The <span>Scout Tool!</span></p>',
                    '<p>Download powerups Using The <span>Pirate Tool!</span></p>',
                    '<p>Gather Badges To Attack others in <span>Raids!</span></p>',
                    '<p>Enjoy Orgainzing Your Profile <span>Join Now!</span></p>'];
    $('#slide-left').click(function() {
        $('#slide').fadeTo('fast', function() {
            $('#slide p').remove();
            if (counter > 0){
                counter --;
            }else{
                if (counter < (slides.length-1)){
                    counter ++;
                }
            }
            $('#slide').append(slides[counter]);
            $('#slide').fadeTo('fast', 1);
        });
    });
});

我不知道这是否正确，但我的5个哨兵：

希望我能帮上忙，

相关文章：