2

我有一个充满articles 的页面，它们之间有边距，包裹在 a 中<div id="shell">，并且正在尝试创建一种效果，如果您将鼠标悬停在一篇文章上，所有其他文章都会淡出。这很容易做到，但是当您从一篇文章移到另一篇文章时，其他所有内容都会再次淡入淡出。我希望它们仅在鼠标位于外壳中而不是在文章上 500 毫秒时才淡出，而不是让所有文章淡入，#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);
};

到目前为止，这就是我所拥有的，但我认为超时不起作用..它偶尔会起作用，但主要是将其余部分淡入然后再次淡出。我是否以完全错误的方式进行此操作，或者我的代码中是否存在故障？如果您有任何想法或更简单的解决方案，我希望得到一些反馈。

在这里跟随我微弱的进步

4

2 回答 2

3

您是否尝试过类似的方法：

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);
    });     
}
于 2012-05-08T09:23:37.137 回答
0

我过去使用 hoverIntent 插件做过类似的事情（尽管是在菜单上）。这使您可以设置 mouseenter 和 mouseleave 函数，还可以指定超时时间，以精确何时触发它们。您还可以将其与布尔变量检查结合使用，即在超时后将鼠标输入设置为真，鼠标离开设置为假（实际上将其推迟到以后的时间）。然后你可以在不同的事件函数中检查这个布尔值来决定你是否想做某事。

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

于 2012-05-08T09:22:53.483 回答