Задержка анимации в jQuery

Question

Я работаю над небольшим количеством функциональности для трех похожих элементов с вкладками.По сути, когда вы наводите курсор на одну, я хочу, чтобы непрозрачность двух братьев и сестер достигла 50%.Я установил довольно простое событие наведения jQuery, вот код страницы ...

<div id="footer">
    <a href="#" class="footer-tabs" id="footer-seek">Seek</a>
    <a href="#" class="footer-tabs" id="footer-experience">Experience</a>
    <a href="#" class="footer-tabs" id="footer-gain">Gain</a>
</div>

... и соответствующий JS:

$('.footer-tabs').hover(
    function () {
        $(this).siblings().animate({ opacity: .5 },500);
    },
    function () {
        $(this).siblings().animate({ opacity: 1 },500);
    }
);

При наведении на один все работаетзамечательно, но когда вы перемещаетесь от одного к другому, братья и сестры не тускнеют одновременно.Я сделал быстрый скринкаст для справки.Я уверен, что есть простой способ заставить его работать должным образом, но я в растерянности для этого.Заранее спасибо.

Скринкаст: http://dl.dropbox.com/u/1762184/example.mp4

Answer 1

Вы хотите отменить любую анимацию в процессе на братьях и сестрах. Для этого предназначена функция stop().

$('.footer-tabs').hover(
    function () {
        $(this).siblings().stop().animate({ opacity: .5 },500);
    },
    function () {
        $(this).siblings().stop().animate({ opacity: 1 },500);
    }
);

Answer 2

Попробуйте это:

$('.footer-tabs').hover(
    function () {
        $(this).siblings().animate({ opacity: .5 },"fast");
    },
    function () {
        $(this).siblings().animate({ opacity: 1 },"fast");
    }
);