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(true, true)

前使用stop()功能

将这两个参数设置为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/

由于不需要的行为，延迟jQuery fadeIn

3 个答案: