2

このコードを使用して、マウスがオンのときとマウスが要素を離れたときに2つの画像間でフェードします。これにより、マウスの動きが速すぎると、不適切な遷移が発生します。それを防ぐ方法は？

私のコード：

$('.prods li').live('mouseenter',function() {
    $(this).children('.label').stop().animate({top: '80%',opacity: 1}, 800, 'easeOutQuint');
    if ($(this).children('.producthover').length) {
        $(this).children('.product').fadeOut(800);
        $(this).children('.producthover').fadeIn(800);
    }
}).live('mouseleave',function() {
    $(this).children('.label').stop().animate({top: '50%',opacity: 0}, 800, 'easeOutQuint');
    if ($(this).children('.producthover').length) {
        $(this).children('.product').fadeIn(800);
        $(this).children('.producthover').fadeOut(800);
    }
});
4

2 に答える 2

2

に変更.stop()してみました.stop(true,true)か？

于 2012-09-02T19:28:49.580 に答える
1

意図を確認できます。

基本的に、その最小時間内に別のアクションが発生しないように、アニメーションの実行を遅らせる必要があります。

var mouseEnterTimer = null;

$('.prods').on('mouseenter', 'li',  function(){

   /*clear timer since another mouseenter has occured within 200 ms */
   clearTimeout(mouseEnterTimer); 


   /*now queue up another one to execute 200 ms later*/
   mouseEnterTimer = setTimeout)function(){
      //all your animation logic here

   }, 200); 
});

これにより、マウスが問題の領域にすばやく出入りした場合でも、イベントが1回だけ発生するようになります。

イベントのデバウンスについてさらに読みたいと思うかもしれません。（そしてそれらがスロットルとどのように異なるか）

また、（とりわけ）優れたhoverIntentプラグインがすでにあります。

于 2012-09-02T19:19:44.103 に答える