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 Example

当你没有悬停在任何按钮上时，淡入所有按钮，然后将ID为buttonContainer且没有填充的div中的按钮包围起来，这段代码可以正常工作：

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

JSFiddle Example with mouseleave

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;
}

SCRIPT

$('.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/

JQuery淡出循环太慢了

4 个答案: