jquery - jQueryホバートグル修正

Question

個々のホバーでdiv、画像/カートに追加ボタンでトグルインする製品のグリッドがあります。ただし、アイテムにすばやくカーソルを合わせるたびに、すべてが多少点滅します。

これがデモです

divフラッシュなしで個々のグリッドアイテムのそれぞれのホバーを切り替えるためのより良いjQueryの方法はありますか？

Answer 1

$.stop()それ以上のアニメーションをキューに入れないように追加するだけです:

$(".grid li").hoverIntent(
    function(){
        $(".grid-hover", this).stop().delay(500).fadeIn();
    },
    function(){
        $(".grid-hover", this).stop().fadeOut();
    }            
);

これを完璧にするのは少し難しいですが、このインスタンス$.hoverIntent()はネイティブよりも優れたツールであると信じています$.hover()。

Answer 2

これは、より快適な UI エクスペリエンスに少し近いようです。

$(document).ready(function() {

    $('.grid li').hover(function(){

        $('.grid-hover').stop();
        $('.grid-hover').fadeOut(500);
        $('.grid-hover', this).fadeIn(500);

    }, function(){

        $('.grid-hover', this).fadeOut(500);

    });

});

完璧ではありません..確かに。on hover jquery イベントを正しく処理するのは難しいです。特にアニメーションで。物事の論理とタイミングに注意深く従わなければならない。.stop()要素のアニメーションを停止する jQuery 関数をいじってみたいと思います。setTimeout()JavaScript関数も同様です。