jQuery Animation Delay

Question

I'm working on a small bit of functionality for three similar tabbed items. Basically, when you hover over one, I want the opacity of the two siblings to go to 50%. I set up a pretty basic jQuery hover event, here's the page code...

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

...and the corresponding JS:

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

When you hover onto one everything works great, but when you hover from one to the other the siblings don't dim simultaneously. I did a quick screencast for reference. I'm sure there's a simple way to make it work properly, but I'm at a loss for it. Thanks in advance.

Screencast: http://dl.dropbox.com/u/1762184/example.mp4

Answer 1

Try this :

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

Answer 2

You want to cancel any in process animations on the siblings. This is what the stop() function is for.

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