JQuery 淡入淡出循环太慢

Question

我有 7 个按钮（一开始都是完全不透明的），当鼠标进入一个按钮时，我希望除了悬停的按钮之外的所有按钮都淡入到 0.4。唯一的问题是，fadeTo 效果（在我编码的以下循环中）似乎是按顺序工作的，因此我留下了缓慢的淡入淡出效果，根本没有非常灵敏。

    $('.button').mouseenter(function (event) {
        $('#' + $(event.target).attr('id')).fadeTo(200, 1);
        $('.button').each(function (i, obj) {
            if ($(this).attr('id') != $(event.target).attr('id'))
                $(this).fadeTo(200, 0.4);
        });
    });

我有什么想法可以通过另一种方式实现这一点吗？

Answer 1

这是一种更简单的方法：

$('.button').mouseenter(function (event) {
    $(this).stop(true, true).fadeTo(200, 1);
    $('.button').not(this).stop(true, true).fadeTo(200, 0.4);        
});

JSFiddle 示例

当您没有悬停时淡入所有按钮然后用 id buttonContainer 包围 div 中的任何按钮，该按钮没有填充，并且此代码应该可以工作：

$('#buttonContainer').mouseleave(function(e) {
    $('.button').stop(true, true).fadeTo(200, 1);
});

带有 mouseleave 的 JSFiddle 示例

Answer 2

var $button = $('button');
$button.mouseenter(function (event) {
    $button.not($(this)).fadeTo(200, 0.4);
});

请参阅示例小提琴： http://jsfiddle.net/3ZtAC/

Answer 3

我认为你可以使用 :not 选择器在没有循环的情况下做到这一点
希望这样会更快。

$('.button').mouseenter(function (event) {
    $('#' + $(event.target).attr('id')).fadeTo(200, 1);
    $('.button:not(#'+$(event.target).attr('id')+')').fadeTo(200, 0.4);
  });
});

Answer 4

HTML

<p class="button" id="btn1">button 1</p>
<p class="button" id="btn2">button 2</p>
<p class="button" id="btn3">button 3</p>
<p class="button" id="btn4">button 4</p>
<p class="button" id="btn5">button 5</p>
<p class="button" id="btn6">button 6</p>

CSS

p {
  background: red;
  margin: 5px;
}

脚本

$('.button').mouseenter(function (event) {
  // mark that this is not inactive anymore
  $(this).stop(true, true).removeClass('inactive').fadeTo(100, 1);
  // any inactive elements and current element will not be affected, improve performance
  $('.button:not(.inactive)').not(this).stop(true, true).addClass('inactive').fadeTo(100, 0.4);
});

示例 http://jsfiddle.net/euKkS/