CODEWITHSUNDEEP
jqueryjquery-animate
Sakshi Sharma
Sakshi Sharma

Reputation: 1472

on mouseover animate margin and animate back without mouseout

i m trying to animate a image on mouse over and i want that it animate back to it normal position without using mouseout. 

       $(document).ready(function() {
$("#bysti-menu li").mouseover(function(){

                var $elem = $(this);
                $elem.find('.uprmenuicon')
                      .animate({
                        'margin-top':'-40px'

                     },400,'easeOutBack').animate({
                        'margin-top':'0px'

                     },400,'easeOutBack')
}).mouseout(function(){
  // do nothing
});

});

here when i put mouseover the image its margin becomes -40px but i want that immediately after that it becomes normal to 0px even when mouse is not yet out ? can anyone help me in this ?

Upvotes: 1

Views: 1204

Answers (3)

eivers88
eivers88

Reputation: 6247

You could set up your function to listen for what type of event is happening: http://jsfiddle.net/dn9wD/1/

Upvotes: 1

Tats_innit
Tats_innit

Reputation: 34117

Sample demo http://jsfiddle.net/R4bzf/ (Behaviour: drag mouse over the yellow/orange panel and then do mouseout)

API .stop will do the trick http://api.jquery.com/stop/

Hope this helps, please let me know if I missed anything, thanx

code

$(this).stop() // Do whatever - .animate({ left: "-270" }, 500);

Upvotes: 0

septemberbrain
septemberbrain

Reputation: 1008

jquery .animate() has a "complete" parameter that is called once the animation is completed. Check the docs here.

Upvotes: 0

Related Questions