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

Question

I'm making a news board that fades the news in and out. When the element fades out the content gets deleted, when it fades back in there is new content in its place. This works, just the timing is off. The new content that should only appear when the old content has faded away, appears as the element is fading. Is there a way to wait until this is done?

$(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);

    });

});

Answer 1

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

$('#slide').fadeTo('fast', 1, function() {

    // This part is executed after fade

});