在 jQuery 中使用悬停隐藏和显示元素有时会导致显示两个元素

Question

我有以下代码：

// Hide all divs that are not the default
                $('div.apps-description > div').not('.default').hide();

                // When an icon is hovered
                $('ul.apps-links li a').hover(function() {

                    var liClass = $(this).parents('li').attr('class');

                    $('div.apps-description > div:visible').fadeOut('fast', function() {
                        $('div.' + liClass).fadeIn('fast');
                    });

                },function()
                {
                    $('div.apps-description > div:visible').fadeOut('fast', function() {
                        $('div.apps-description > div.default').fadeIn('fast');
                    });
                });

标记例如是：

<ul class="apps-links">
    <li class="app-one"><a href="./">Test</a></li>
    <li class="app-two"><a href="./">Test</a></li>
    <li class="app-three"><a href="./">Test</a></li>
</ul>

<div class="apps-description">
    <div class="default">Default Content</div>
    <div class="app-one">Default Content</div>
    <div class="app-two">Default Content</div>
    <div class="app-three">Default Content</div>
</div>

这个想法是默认 div 在页面加载时显示，然后当您悬停一个项目时，它会根据其匹配的类淡出默认和链接的 div。这一切都很好，除非我在它再次正确淡出之前将鼠标悬停在另一个链接上，这将导致默认和新 div 都显示！

任何想法如何解决这个问题？我尝试使用.stop()，但这只会导致动画中断，因为它们在淡入淡出中停止并附加糟糕的不透明度值。

编辑：还注意到，如果我将鼠标悬停在所有链接上，它将导致所有 div 出现，但它们会自动修复自己。因此，淡入和淡出显然是一个问题，彼此之间的顺序不好。

Answer 1

试试这个：

var target_class = 'default';
$('div.apps-description > div').not('.default').hide();

// When an icon is hovered
$('ul.apps-links li a').hover(function() {

        target_class = $(this).parents('li').attr('class');

        $('div.apps-description > div:visible').fadeOut('fast', function() {
            $('div.' + target_class).fadeIn('fast');
        });

}, function() {
    target_class = 'default';
    $('div.apps-description > div:visible').fadeOut('fast', function() {
        $('div.' + target_class).fadeIn('fast');
    });
});

使用全局“target_class”将避免显示多个项目，因为只有一个是目标。

Answer 2

• 将“悬停”标志设置为全局变量。悬停时开启。
• 如果设置了标志，并且发生了另一个悬停事件，则从函数返回。
• 当用户取消悬停时，清除标志。

所以基本上，只要第一个悬停事件尚未完成，您就会关闭未来的悬停事件。

简化：

var hovering = 0

$('ul.apps-links li a').hover(function() {
   if(hovering==1) {
        return;
   }
   hovering=1
   ... your code ...
   }, function()  {
                    hovering = 0
                    ... your code ..
    });
});