CODEWITHSUNDEEP
jquerymenujquery-animate
azz
azz

Reputation: 5940

jQuery .animate() 'toggle'

I've been toying with a jQuery navigation menu, and I made a mock up of it for examples sake: http://jsfiddle.net/DerFlatulator6/3jYhh/1/

I was having an issue where it would do pretty much the exact opposite I wanted it to do. My code for the hover event was like this:

$(this)
    .addClass('selected')
    .children('ul')
        .animate({'height': 'toggle'}, 300);

After some tinkering, I came up with this

$(this)
    .addClass('selected')
    .children('ul')
        .css('height', 'toggle')
        .animate({'height': 'toggle'}, 300);

Which works, but I have no idea why! Is anyone able to explain exactly what is happening?

A side question... You'll notice the fiddle has a 3 level menu, where the code is isolated for vertical and horizontal drop downs, would there be good a way to write a function to cover them both, or should I leave it as is?

Upvotes: 4

Views: 1885

Answers (1)

jcubic
jcubic

Reputation: 66650

animate({'height': 'toggle'}, 300) is like animate height from current to 0 if height is more the 0 or animate from 0 to previous if current is 0.

from documentation http://api.jquery.com/animate/

In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.

Upvotes: 2

Related Questions