Jquery hover toggle

Question

Hi what i've done is on document.load i've decreased the height of the nav li's and animated up the div below the nav. What i want to do is on hover of each li in the nav is reverse the animate jquery code below:

              $('.tabs li a').animate({
                height: '40'
              }, 1000, function() {
                // Animation complete.
              });

              $('#tabs-wrap').animate({
                marginTop: '-=147'
              }, 1000, function() {
                // Animation complete.
              });

How would i go about reversing this code but with hover triggers??

Thanks

Animating height can also be done by "toggle". Is the A going to be totally invisible? — Marnix, Jan 10 '11 at 21:33

score 5 · Accepted Answer · answered Jan 10 '11 at 21:34

Something like the following?

$('tabs li a').hover(function(){
  $(this).animate({height:40}, 1000, function(){
      //animation complete
  });
}, function(){
  $(this).animate({height:0}, 1000, function(){
      //animation complete
  });  
});

$('#tabs-wrap').hover(function(){
  $(this).animate({marginTop: '-147'}, 1000, function(){
   //animation complete   
  });

}, function(){
  $(this).animate({marginTop: '147'}, 1000, function(){
   //animation complete
  });

});

Note, additionally with animations like this remember to stop your animation before proceeding with another animation on your element.

Example:

$(this).stop().animate({height:300}), 1000, function(){ });

No problems, glad I could be of some help. – Jason Benson Jan 10 '11 at 22:05 — Jason Benson, Jan 10 '11 at 22:05

score 0 · Answer 2 · answered Jan 10 '11 at 21:34

0

If I got it right, you are looking for the .hover() function, dont you?

answered Jan 10 '11 at 21:34

Jay

2,141
6
26
37

Jquery hover toggle

2 Answers2