How to add multiple event(mouseover/mouseout) into one selector

Vote count:

0

If I mouseover/mouseout very fast more than one time during animation times (here 900). Button is animating more than one time; even when I stopped mouse activity. I want that It will take only one event for animation during animation times .Even when multiple event triggered. Other way I want to say if I triggered multiple mouseover event during 900 it will terminate immediately when I triggered mouseout and vice-versa.

$(document).ready(function(){
     $("button").mouseover(function() {
          $( this ).css({background :'transparent',color : '#09F'}); 
          $( "button" ).animate({width: "110%",}, 900 ); $(this).text("Show More >"); });

           $("button").mouseout(function() { 
           $( this ).css({background :'#09F',color : '#FFF'}); $( "button" ).animate({width: "100%",}, 900 );
           $(this).text("Show More"); });

});

asked 26 secs ago

James

47