The dangers with using .animate()
as-is is that you do not ensure that the element has returned to it's original or end state, causing an animation queue to stack up upon each other. Therefore, chaining .stop(true,true)
usually alleviates the issue, i.e. .stop(true,true).animate(...)
.
Moreover, your function seems to be bloated — if all elements are to be adjusted to the same dimensions, you can use multiple selectors, or even better, simply selecting the siblings of #home
.
$('#home').hover(
function(){
$(this).siblings().stop(true,true).animate({
height: "400px",
width: "136px"
});
},
function(){
$(this).siblings().stop(true,true).animate({
height: "448px",
width: "150px"
});
}