JQuery fade loop too slow

У меня есть 7 кнопок (с полной непрозрачностью для начала), когда мышь входит в одну кнопку. Я хочу, чтобы все кнопки были от кнопки, которая зависала, чтобы исчезнуть до 0,4. Проблема только в том, что кажется, что эффект fadeTo (в следующем цикле, который я закодировал) работает последовательно, поэтому я остался вялым эффектом затухания, не очень отзывчивым вообще.JQuery fade loop too slow

$('.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); 
     }); 
    });

Любые идеи, как я могу достичь этого по-другому?

источник

2012-01-20 JᴀʏMᴇᴇ

и ваш html? или даже лучше рабочий пример здесь -> http://jsfiddle.net/ – ManseUK

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

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

JSFiddle Example

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

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

JSFiddle Example with mouseleave

источник

2012-01-20 08:43:13

Блестящий, угасающий был моим следующим вопросом поэтому большое спасибо! –

Ричард, если вы посмотрите на пример JSFiddle и наведите указатель мыши на все «кнопки» слева направо, вы заметите более медленный эффект затухания, это проблема, с которой я столкнулся. Это не совсем так - это задержка. В то время как раньше у меня был центр мыши (чтобы исчезнуть только одной кнопкой), а на мышином фоне снова исчезла только одна кнопка - гораздо более отзывчивая. Я думаю, мне нужно будет выбрать здесь между выцветанием всех входов/выходов и медленным эффектом или вернуться к обработке только одной кнопки за один раз на мышином/мышеловке. –

@DanielMcNulty Я добавил вызов '.stop()' now. Делает ли это то, что вы хотите? –

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

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

источник

2012-01-20 08:41:53 fcalderan

Perfect !! Спасибо большое, что я был после. –

Это не затухает. –

Richard, я сделал небольшое редактирование, чтобы заставить его работать - var $ button = $ ('. Button'); –

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

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

источник

2012-01-20 08:47:10

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/

источник

2012-01-20 09:03:47

JQuery fade loop too slow

ответ

Смежные вопросы