1

我有 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() {
        });
    });

还有一个小提琴：小提琴

4

2 回答 2

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

于 2013-04-04T16:41:35.800 回答
0

似乎当您将鼠标悬停在各个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预览代码

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

于 2013-04-04T12:27:02.153 回答