Jqueryアニメーションキューの問題

Question

1つのスクリプトに問題があります。アニメーションはキューイングを続けます。あなたのフォーラムで解決策を探しました。私はストップ（真、真）とそのいくつかのバリエーションとキューを待ちました：偽。

たぶん私は間違った場所に置いているかもしれませんが、私はまだjQueryに100％快適ではありません。

この時点での機能は次のとおりです。あなたが.animate()メソッドの前にそれを置く場合

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()はうまく動作するはずです：

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

は.animate

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