jQuery Animation Delay
I'm working on a small bit of functionality for three similar tabbed items开发者_C百科. 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
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);
}
);
Try this :
$('.footer-tabs').hover(
function () {
$(this).siblings().animate({ opacity: .5 },"fast");
},
function () {
$(this).siblings().animate({ opacity: 1 },"fast");
}
);
精彩评论