jQuery动画队列问题答案

【问题标题】：Jquery animation queue problemsjQuery动画队列问题
【发布时间】：2010-11-22 13:43:40
【问题描述】：

我的一个脚本有问题。动画一直在排队。我已经在您的论坛中搜索了解决方案。我尝试了 stop(true,true) 和它的一些变体以及 queue:false。

也许我只是把它放在了错误的位置，我对 jQuery 还不是 100% 满意。

函数现在是这样的；

jQuery(document).ready(function($) {
    $('div.wp-caption').each(function(i) {

        var img_ = $('img', this);          
        var img_height = img_.attr('height');
        var p_height = $('p', this).outerHeight();

        $(this).height(img_height);

        $(this).hover(function()  { 
            img_.animate({marginTop : -p_height}, 500);
        },  function()  {
            img_.animate({marginTop : '0'}, 500);
        });                 
    });     
});

【问题讨论】：

标签： jquery queue jquery-animate

【解决方案1】：

stop() 放在.animate() 方法之前应该可以正常工作：

$(this).hover(function()  { 
    img_.stop().animate({marginTop : -p_height}, 500);
},  function()  {
    img_.stop().animate({marginTop : '0'}, 500);
});

【讨论】：

【解决方案2】：

尝试清除动画队列：

            $(this).hover(function()  { 
                img_.stop(true, true).animate({marginTop : -p_height}, 500);
            },  function()  {
                img_.stop(true, true).animate({marginTop : '0'}, 500);
            });

true, true 参数告诉 jQuery 清除队列并跳转到动画的末尾。

【讨论】：

不错的一个！那肯定会派上用场的。 =)

【解决方案3】：

尝试将.stop() 放在.animate 之前

$(this).hover(function()  { 
   img_.stop().animate({marginTop : -p_height}, 500);
},  function()  {
   img_.stop().animate({marginTop : '0'}, 500);
});

【讨论】：

干杯！感谢您的贡献。