jquery - 一组项目上的悬停效果 - 移动到同级元素时防止闪烁

Question

我在一个页面上有一组项目——当一个项目悬停在上面时，它的兄弟姐妹会改变它们的不透明度，使它们看起来变暗。当光标移动到组中的另一个项目时，兄弟姐妹首先淡入 100% 不透明度，然后再次变暗。如何防止已经变暗的项目不变暗（当然，悬停在上面的项目除外）？

我的 jQuery 代码如下，我在这里设置了一个 jsfiddle 演示：http: //jsfiddle.net/clorentzen/wmhMR/2/

谢谢！

$(document).ready(function() {
    $('.module').hover(function() {
        $(this).siblings('div').fadeTo(250, .5);
    }, function() {
        $(this).siblings('div').fadeTo(250, 1.0);
    });
});

Answer 1

我知道这篇文章很旧，但由于没有公认的答案，这里有一个快速修复。只需在fadeTo() 之前添加stop()。

$(document).ready(function() {
    $('.module').hover(function() {
        $(this).siblings('div').stop().fadeTo(250, .5);
    }, function() {
        $(this).siblings('div').stop().fadeTo(250, 1.0);
    });
});

Answer 2

http://jsfiddle.net/wmhMR/6/

尝试这个：

$(document).ready(function() 
 {
  $('.module').mouseenter(function() 
   {
    $(this).css({'opacity':'0.5'});
   })
  $('.module').mouseleave(function() 
   {
    $(this).css({'opacity':'1'});
   })
 });