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

我有以下代码：

// 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。这一切都很好，除非我在另一个链接正确淡出之前再次悬停，它将导致默认和新的div显示

有没有办法解决这个问题？我尝试使用

.stop（）

，但这只会导致动画在中途停止淡入淡出并附加糟糕的不透明度值时中断

编辑：还注意到，如果我将鼠标悬停在所有链接上，会导致所有div显示，但它们会自动修复自己。所以很明显，fadein和outs之间的顺序不正确是一个问题。

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

因此，只要第一个悬停事件尚未完成，基本上您就关闭了将来的悬停事件

简化：

var hovering = 0

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

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

因此，只要第一个悬停事件尚未完成，基本上您就关闭了将来的悬停事件

简化：

var hovering = 0

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

试试这个：

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');
    });
});

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

尝试以下方法：

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\u class”将避免显示多个项目，因为只有一个是目标。

是否尝试使用

.stop（true，true）在淡入淡出功能之前，
$（'div'）.stop（true，true.fadeIn（'fast'）？这无法解决问题，然后导致严重滞后。您是否尝试使用
.stop（true，true）在淡入淡出功能之前，
$（'div'）.stop（true，true.fadeIn（'fast'）？这不能解决问题，然后导致严重滞后。请你举个例子，因为我不明白。谢谢，即使使用它，我仍然会遇到同样的问题：/您没有在代码块顶部声明“var hovering=0”。请您演示一个示例，因为我不明白。谢谢，即使使用它，我仍然会遇到同样的问题：/n您没有在代码块顶部声明“var hovering=0”。嘿，Cameron，试试这个解决方案，它工作得很顺利。悬停修正对我也不起作用。嘿，卡梅隆，试试这个解决方案，它工作得很顺利。悬停修正对我也不起作用。