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。

Answer 2

这是你想要的效果吗？立即隐藏在下一个li上，否则淡出...

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

FIDDLE

setTimeout on jQuery中的切换

2 个答案: