Jquery动画队列问题

Question

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

也许我只是把它放在错误的位置，我还没有 100% 熟悉 jQuery。

该函数目前看起来像这样；

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);
        });                 
    });     
});

Answer 1

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

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

Answer 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 清除队列并跳转到动画末尾。

Answer 3

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

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