jQuery动画回调没有按顺序触发答案

【问题标题】：jQuery animation callbacks not firing in sequencejQuery动画回调没有按顺序触发
【发布时间】：2012-11-29 16:28:42
【问题描述】：

var slideWidth = $('#carousel #slideContainer .slide').width();
var slidePos = (($('ul#carousel_nav li').index(this)) * slideWidth);
slidePos = Math.abs(slidePos) * -1;

$('#carousel #slideContainer .slide .slideContents').stop();
$('#carousel #slideContainer').stop();

    $('#carousel #slideContainer .slide .slideContents').fadeOut( 500, function() 
    {
        $('#carousel #slideContainer').animate({ left: slidePos }, 1000, function() 
        {
            $('#carousel #slideContainer .slide .slideContents').fadeIn( 500 );
        });
    });

构建一个具有动画/回调链的 jQuery 滚动条。当一个按钮被点击时，div '#carousel #slideContainer .slide .slideContents 应该淡出并且它的容器div '#carousel #slideContainer .slide .slideContents 移动 n 个像素（slidePos）

当执行动画回调并不总是在前一个动画结束时触发，整个序列变得不连贯？！

【问题讨论】：

试试.stop(true)，这也会清除动画队列。
非常好，非常感谢！

标签： javascript jquery callback jquery-animate

【解决方案1】：

在我看来，pitaj 说的很管用

var slideWidth = $('#carousel #slideContainer .slide').width();
var slidePos = (($('ul#carousel_nav li').index(this)) * slideWidth);
slidePos = Math.abs(slidePos) * -1;

$('#carousel #slideContainer .slide .slideContents').stop(true);
$('#carousel #slideContainer').stop(true);

$('#carousel #slideContainer .slide .slideContents').fadeOut( 500, function() 
{
    $('#carousel #slideContainer').animate({ left: slidePos }, 1000, function() 
    {
        $('#carousel #slideContainer .slide .slideContents').fadeIn( 500 );
    });
});

【讨论】：