jquery - jQuery 中切换时的 setTimeout

Question

当鼠标悬停在菜单项上时，我的菜单会显示一个图标和一些文本。不幸的是，当从顶部悬停到底部(然后返回)时，淡入淡出动画会使所有图像和文本相互淡入淡出，这看起来不太好。

我正在寻找一种在切换开关上放置 setTimeout 的方法，以便仅当用户将鼠标悬停在菜单项上超过 1 秒时才会显示图标和文本。如果用户将鼠标快速悬停在菜单项上，则不会显示图标和文本。

这是我现在拥有的 jQuery:

$('.button').hover(function () {
 var id = $(this).attr('id').substr(4);
 $('.content').not('#photo' + id).fadeOut();
 $('.text').not('#info' + id).fadeOut();

 $('#photo' + id).fadeToggle();
 $('#info' + id).fadeToggle();
});


$('.button').mouseout(function () {
    $('.content').fadeOut();
    $('.text').fadeOut();
});

我用一个实例制作了一个jsfiddle:http://jsfiddle.net/MaxdeMooij/9ozqgLwq/ Slidetoggles 上有一些关于 setTimeout 的主题，但我无法将这些解决方案集成到我的代码中。谁能帮我？那就太好了。

感谢您的帮助!

Answer 1

这是使用计时器的另一种解决方案。这个保持淡出效果。

var timerHandle = null;
$('.button').hover(function() {
    if (timerHandle != null) {
        clearTimeout(timerHandle);
        timerHandle = null;
    }
    timerHandle = setTimeout($.proxy(function() {
        var id = $(this).attr('id').substr(4);
        $('.content').not('#photo'+id).fadeOut();
        $('.text').not('#info'+id).fadeOut();

        $('#photo'+id).fadeToggle();
        $('#info'+id).fadeToggle();
    }, this), 500);
});

$('.button').mouseout(function(){
    $('.content').fadeOut();
    $('.text').fadeOut();
    if (timerHandle != null) {
        clearTimeout(timerHandle);
        timerHandle = null;
    }
});

一个jsFiddle已提供。