JQuery затухает петля слишком медленно - PullRequest
Новая
       6

JQuery затухает петля слишком медленно

2 голосов
/ 20 января 2012

У меня есть 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);
        });
    });

Есть идеи, как мне достичь этого другим путем?

Ответы [ 4 ]

3 голосов
/ 20 января 2012

Это гораздо более простой способ сделать это: 

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

Пример JSFiddle

Чтобы отобразить все кнопки, когда вы не наводите курсор мыши на какую-либо из них, окружите кнопки в элементе div с идентификатором buttonContainer, у которого нет отступов, и этот код должен работать: 

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

Пример JSFiddle с отпусканием мыши

2 голосов
/ 20 января 2012 
var $button = $('button');
$button.mouseenter(function (event) {
    $button.not($(this)).fadeTo(200, 0.4);
});

См. Пример скрипта: http://jsfiddle.net/3ZtAC/

1 голос
/ 20 января 2012

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

SAMPLE http://jsfiddle.net/euKkS/

1 голос
/ 20 января 2012

Я думаю, что вы можете сделать это без цикла, используя селектор: not Надеюсь, так будет быстрее. 

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