CODEWITHSUNDEEP
javascriptjqueryjquery-animatemouseevent
Zackary Lundquist
Zackary Lundquist

Reputation: 101

Reversing jquery animation with mouse leave

This is really frustrating me because it's a simple question that I know I am gonna face-palm myself for when someone gives a 1 line answer for hah. Anyway I have the following on mouseenter snippet

$("nav#primary ul li").mouseenter(function(){
    $(this).find('ul:first').stop(true, true).animate({
              height: ['toggle', 'swing'],
              opacity: 'toggle'
          }, 300, 'linear');
  });

My question is how do I reverse the effect of the animation after the mouse leaves primary ul li?

Upvotes: 0

Views: 275

Answers (2)

Nis
Nis

Reputation: 1477

If I understood your question correctly, you are animating hight and opacity when the mouse enters an element and revert back to original condition when it leaves.

$( "av#primary ul li" ).hover(
    function() {  // on mouse enter
        // save the original values
        var h = $(this).css('height');
        var o = $(this).css('opacity');
        $(this).attr('data-Oheight',h).attr('data-Oopacity',o);
        // do your animation here
    }, function() {     // on mouse leave
        // retrive the original values
        var h = $(this).attr('data-Oheight');
        var o = $(this).attr('data-Oopacity');
        // revert back
        //do your animation to revert back
    }
);

However, having said that , there is TweenMax tool from GreenSock. It is very handy when it comes to these kind of animation requirements. Let me know if you need to know more.

Upvotes: 0

codingrose
codingrose

Reputation: 15709

$("nav#primary ul li").mouseenter(function(){
    //your code for mouseenter
},function(){
    //your code for mouseleave
});

Upvotes: 0

Related Questions