JQuery .animate при событии hover для одинаковых элементов?

Question

[Тимур]

Подскажите пожалуйста вариант решения следующей проблемы:



Есть несколько div'ов расположенных на странице. нужно сделать так, чтобы при наведении на один все остальные становились полу-прозрачными, а при уходе с него прозрачность исчезала



Для этого использую следующий код

$('div').hover(<br>
    function() {<br>
        $('div').not(this).animate({opacity: 0.15}, 700);<br>
    },<br>
    <br>
    function() {<br>
        $('div').not(this).animate({opacity: 1}, 300);<br>
    }<br>
);<br>

Но проблема в том, что при быстром передвижении курсора через несколько элементов все начинает мигать абы как. А мне нужно этого избежать. В общем проще один раз увидеть. Попробуйте передвигать курсор медленного с одного элемента (или с пустого места) на другой. В медленном варианте все как и должно быть, а вот в быстром — нет.



Важным условием является тот факт, что прозрачности не должно быть когда курсор находится вне div'ов



Заранее спасибо!

Answer 1

[skorney]

Особо нет времени проверять, но думаю что переделать нужно в таком ключе:
$('div').not(this).stop(true, true).animate({opacity: 0.15}, 700);

api.jquery.com/stop/

Comments

[Тимур]

Огромное спасибо!!! Держите +

Answer 2

[Igor]

docs.jquery.com/Effects/stop#clearQueuegotoEnd

Comments

[Igor]

jsfiddle.net/tU8Qn/

[Тимур]

спасибо! Плюс

Answer 3

[freeek]

Если на этот же див потребуется повесить ещё какие-то действия, я бы посоветовал использовать такую конструкцию:

$('div').on({

   mouseenter: function () {

      //stuff to do

   },

   mouseleave: function () {

      //stuff to do

   }
});

Answer 4

[NeX]

А для нормальных браузеров лучше сделать на css jsfiddle.net/tU8Qn/2/

Comments

[Тимур]

Ваш пример не работает. Анимации не вижу. Chrome Версия 22.0.1229.94 m

[NeX]

jsfiddle.net/tU8Qn/4/ и поддержка браузерами смотрите caniuse.com/#search=transition