Question

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

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

div全部浮动，1px边距。（我试过删除边缘BTW）。

我的标记：

<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()功能应该足以满足我的评论：

$('#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

预览代码

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

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

2 个答案: