javascript - 由于不需要的行为而延迟 jQuery fadeIn

Question

仅在鼠标悬停其父级 .right-menu-background片刻之后，如何使我的.right-menu DIV 淡入？问题是，当您快速移入和移出光标时，.right-menu DIV 会重新出现很多次。

如何将动画延迟几毫秒？

这是代码：

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

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

Answer 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();
    });
});

Answer 2

在衰落调用前使用stop()函数...stop(true, true)

将这两个参数设置为 true，动画队列被清除并播放最后一个动画，这将摆脱奇怪的效果

$(this).find(".right-menu").stop(true, true).fadeIn();

Answer 3

使用.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/