0

.right -menu DIV をフェードインするには、マウスが親の.right-menu-background にホバリングした直後にのみ行うにはどうすればよいですか? 問題は、カーソルをすばやく出し入れすると、.right-menu DIV が何度も再表示されることです。

アニメーションを数ミリ秒遅らせるにはどうすればよいですか?

コードは次のとおりです。

$(function(){
     $(".right-menu-background").hover(function(){
          $(this).find(".right-menu").fadeIn();
          }

,function(){
     $(this).find(".right-menu").fadeOut();
     }
);        
});
4

3 に答える 3

1

フェージング呼び出しの前でstop()関数を使用する...stop(true, true)

これら 2 つのパラメータを true に設定すると、アニメーション キューがクリアされ、最後のアニメーションが再生されます。これにより、奇妙な効果が得られます。

$(this).find(".right-menu").stop(true, true).fadeIn();
于 2013-10-21T09:53:18.557 に答える
1

簡単な修正は.stop()を使用することです

$(function () {
    $(".right-menu-background").hover(function () {
        $(this).find(".right-menu").stop(true, true).fadeIn();
    }, function () {
        $(this).find(".right-menu").stop(true, true).fadeOut();
    });
});

タイマーの使用

$(function () {
    $(".right-menu-background").hover(function () {
        var el = $(this).find(".right-menu");
        var timer = setTimeout(function(){
            el.stop(true, true).fadeIn();
        }, 500);

        el.data('hovertimer', timer);
    }, function () {
        var el = $(this).find(".right-menu");
        clearTimeout(el.data('hovertimer'))
        el.stop(true, true).fadeOut();
    });
});
于 2013-10-21T09:43:59.607 に答える
0

関数を使用.delay()します。

コードは次のとおりです。

$(function(){
 $(".right-menu-background").hover(function(){
      $(this).find(".right-menu").delay(800).fadeIn(400);
      },function(){
 $(this).find(".right-menu").fadeOut(400);
 });        
});

ここでデモを確認してください: http://jsfiddle.net/Mju7X/

于 2013-10-21T09:44:43.427 に答える