Проблемы с анимацией в Jquery

Question

Возникла проблема с одним из моих скриптов. Анимация продолжает стоять в очереди. Я искал на ваших форумах решения. Я попытался остановить (true, true) и некоторые варианты этого, а также очереди: 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

Попробуйте поставить .stop() перед .animate

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

Answer 3

Попробуйте очистить очередь анимации:

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

Аргументы true, true говорят jQuery очистить очередь и перейти к концу анимации.