Question

我有一个充满article s的页面，它们之间有边距，包裹在<div id="shell">中，我正在尝试创建一种效果，如果你将鼠标悬停在一篇文章上，其他所有其他文件都会淡出。这很简单，但是当你从一篇文章转到另一篇文章时，其他一切都会逐渐消失。离开#shell而不是让所有文章都重新投入，我希望它们只在鼠标进入shell时退回，而不是在500ms的文章上，因为shell占用整个窗口。

$('article').hover(function() {
    if ($('body').hasClass('hover')) {
        $(this).fadeTo(100,1);
    }
    else {
        $('body').addClass('hover');
        $('article').not(this).fadeTo(300, 0.6);
    }
}, function() {
    $(this).fadeTo(300,0.6);
    checkandfade();
});

function checkandfade() {
    setTimeout(function() {
        $(document).mousemove(function(e){
            if (e.target.id == 'shell' && $('body').hasClass('hover')){
                $('article').stop(true,true).fadeTo(100, 1);
                $('body').removeClass('hover');
            }
        });
    },500);
};

这就是我到目前为止的情况，但我不认为超时是有效的..它偶尔会起作用，但大多数时候会将其余部分再次消失。我是否完全以错误的方式解决这个问题，或者我的代码中是否存在故障？如果您有任何想法或更简单的解决方案，我会喜欢一些反馈。

跟随我的微弱进展here

Answer 1

你有没有试过像：

var timeout = 0;
$('article').hover(function() {
    $(this).stop(true, true).addClass('artHovered').fadeTo(100,1);
    fadeOutArticles();
}, function() {
    $(this).removeClass('artHovered');
    fadeOutArticles();
});
function fadeOutArticles(){
    clearTimeout(timeout);
    $('article').not('.artHovered').fadeTo(300,0.6, function(){
        timeout = setTimeout(function(){
            if($('article.artHovered').length==0){
                $('article').stop(true,true).fadeTo(100, 1);
            }
        }, 500);
    });     
}

Answer 2

我过去使用hoverIntent插件做了类似的事情（尽管在菜单上）。这允许您设置mouseenter和mouseleave函数，并指定关于何时应该触发它们的超时。您还可以将此与布尔变量检查结合使用，即在mouseenter上将某些内容设置为true，并在超时后将mouseleave设置为false（实际上将其推迟到以后的时间）。然后，您可以在不同的事件函数中检查此bool，以决定是否要执行某些操作。

http://cherne.net/brian/resources/jquery.hoverIntent.html

Jquery在悬停时淡出所有其他榆树，直到鼠标离开所有榆树一段时间后才会消失

2 个答案: