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

我有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> 

---

还有一把小提琴：

当您在单个

div

元素之间悬停时，光标会放在

div类

之外的一个点上，触发淡入淡出。当您继续在元素列表下悬停时，闪烁效果变得更加明显

一种方法是重新构造标记，使

.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

元素可以具有唯一标识符，但这将消除您现在看到的

轻弹效果

您可以在此处预览代码

上面的提琴只是一个演示，但是有了更多的信息，我们可以设计出更好的方法来满足您的需求。
当您在各个
div
元素之间徘徊时，光标会放在
div类
之外的一个点上，触发淡入淡出。当您继续在元素列表下悬停时，闪烁效果变得更加明显

一种方法是重新构造标记，使
.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
元素可以具有唯一标识符，但这将消除您现在看到的
轻弹效果

您可以在此处预览代码

上面的提琴只是一个演示，但是有了更多的信息，我们可以设计出更好的方式来满足您的需求。
我已经更新了您的提琴。添加
stop（）

$('#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() { });
    });


此函数用于停止以前的任何信息。由于“悬停入”在“悬停出”之前，它将停止正在运行的动画，并强制其保持淡入0.2，因此我已更新了您的小提琴。添加
stop（）

$('#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() { });
    });


此函数用于停止以前的任何信息。由于“悬停入”在“悬停出”之前，它将停止正在运行的动画，并强制将其淡入0.2，谢谢您的回答。我会更改标记，但出于美观的原因，我真的希望保留它。我希望图像能够溢出到单独的行中。我加了一把小提琴来澄清。此外，我删除了边距等，因此每个div（p-#）之间不应该有间隙？为什么不在当前div中添加一个由@Anthony演示的新类，然后在这些新类中添加fadein？@JSantos您能详细说明一下吗？仅供参考：每组图像/div都是使用CMS方法动态创建的。我已经用我的意思更新了Anthony的小提琴。我不确定你的问题出在哪里，也许这样可以解决。Regards@Victor问题似乎是您的光标可能会悬停在触发闪烁的
div
之间的空格上，您需要将悬停效果封装在父元素上以避免闪烁（如我所建议的）。您将知道什么与您的标记一起工作，这个想法只是为了说明在父div上具有悬停效果。谢谢您的回答。我会更改标记，但出于美观的原因，我真的希望保留它。我希望图像能够溢出到单独的行中。我加了一把小提琴来澄清。此外，我删除了边距等，因此每个div（p-#）之间不应该有间隙？为什么不在当前div中添加一个由@Anthony演示的新类，然后在这些新类中添加fadein？@JSantos您能详细说明一下吗？仅供参考：每组图像/div都是使用CMS方法动态创建的。我已经用我的意思更新了Anthony的小提琴。我不确定你的问题出在哪里，也许这样可以解决。Regards@Victor问题似乎是您的光标可能会悬停在触发闪烁的
div
之间的空格上，您需要将悬停效果封装在父元素上以避免闪烁（如我所建议的）。您将知道什么与您的标记一起工作，这个想法只是为了说明在父div.Boom上具有悬停效果。就是这个。我已经试过了，但我没有为我工作！？也许我的应用程序没有更新。在你的提示和宾果游戏后，我又试了一次，效果很好。谢谢你的时间。就是这个。我已经试过了，但我没有为我工作！？也许我的应用程序没有更新。在你的提示和宾果游戏后，我又试了一次，效果很好。谢谢你的时间