在同一类的 div 之间悬停时停止闪烁

Question

我有 3 组 div，它们有一个动态分配给它们的类。当用户将鼠标悬停在任何 div 上时，jQuery 会检查该类并淡化具有相同类的其他类。这很好用，但是如果我将鼠标悬停在具有相同类的 div 之间，jquery 似乎每次都会触发。大概是因为它重新检查了课程并触发了效果。

我的问题是如何在同一类 div 之间悬停时停止闪烁？

所有的 div 都以 1px 的边距向左浮动。 （顺便说一句，我尝试删除边距）。

我的标记：

<div id="projects">

   <div class="p-1">IMAGE</div>
   <div class="p-1">IMAGE</div>
   <div class="p-1">IMAGE</div>

   <div class="p-2">IMAGE</div>
   <div class="p-2">IMAGE</div>
   <div class="p-2">IMAGE</div>

   <div class="p-3">IMAGE</div>
   <div class="p-3">IMAGE</div>
   <div class="p-3">IMAGE</div>

</div> 

还有 jQuery

    $('#projects div[class^=p-]').hover(function() {
        $('#projects div[class=' + $(this).attr('class') + ']').fadeTo(200, 0.2, function() {
        });
    }, function() {
        $('#projects div[class=' + $(this).attr('class') + ']').fadeTo(200, 1.0, function() {
        });
    });

还有一个小提琴：Fiddle

Answer 1

我已经更新了你的小提琴。添加 stop() 函数对于我从您的 cmets 中理解的内容应该足够了：

$('#projects div[class^=p-]').hover(function() {
    $('#projects div[class=' + $(this).attr('class') + ']').stop().fadeTo(0, 0.2, function() { });
    }, function() {
        $('#projects div[class=' + $(this).attr('class') + ']').stop().fadeTo('slow', 1.0, function() { });
    });

http://jsfiddle.net/hXHGe/9/

这个函数会停止之前的任何动作。由于悬停在悬停之前，它将停止运行动画并强制它保持淡入淡出到 0.2

Answer 2

似乎当您将鼠标悬停在各个 div 元素之间时，光标会放置在您的 div class 之外的某个位置上，从而触发淡入淡出。当您继续将鼠标悬停在元素列表下方时，闪烁效果会变得更加明显。

一种方法是重构您的标记，使 .p-# div 成为这些图像的父 div，以便将悬停效果应用于子 div 元素一次，就像这样，

<div id="projects">

   <div class="p-1">
       <div>IMAGE</div>
       <div>IMAGE</div>
       <div>IMAGE</div>
   </div>

   <div class="p-2">
       <div>IMAGE</div>
       <div>IMAGE</div>
       <div>IMAGE</div>
   </div>

   <div class="p-3"> 
       <div>IMAGE</div>
       <div>IMAGE</div>
       <div>IMAGE</div>
   </div>

</div>

如果需要，单个子 div 元素可以具有唯一标识符，但这将消除您现在看到的 flicking 效果。

你可以在这个jsfiddle预览代码

上面的小提琴只是一个演示，但有了更多信息，我们可以设计出更好的方法来满足您的需求。