Question about .stop() in jQuery !

I know that .stop() function is used to stop animation .. but where should I put it when I have this code:

$('#home').mouseover(function(){
    $('.subhome_icon').animate({
        "width":"5px",
        "opacity":"1.0"
    },1);
    $('.subhome_icon').animate({
        "height":"15px"
    },1000);
    $('.subhome_icon').animate({
        "width":"60px"
    },1000);
}).mouseout(function(){
    $('.subhome_icon').animate({
        "opacity" :"0.0"
    },1000);
});

And I want to stop the animation when I leave the ico开发者_运维百科n with the mouse pointer ! I've wathced many jQuery videos but the examples are with one animation .. I've got 3 !?

Thanks you ! : )

This should do it....

$('#home').mouseover(function(){ 
    $('.subhome_icon').animate({ "width":"5px", "opacity":"1.0" },1); 
    $('.subhome_icon').animate({ "height":"15px" },1000); 
    $('.subhome_icon').animate({ "width":"60px" },1000); })
.mouseout(function(){ 
    $('.subhome_icon').stop().animate({ "opacity" :"0.0" },1000); 
});

You need to use

.mouseout(function(){ 
    $('.subhome_icon').stop(true).animate({ 
                            "opacity" :"0.0" },
                         1000); 
});

(notice the true argument passed to the .stop() method)

This clears the queued animations so it truly stops at the current state.