Question

Can you please take a look at this JSFIDDLE sample which I am trying to create a smooth animate of hidden div from down to up on mouse hover. As you can see the div appears from left down corner but I would like to animate it from bottom to top. I tried to use animate() but I didn’t know how to change the hidden div statue from hidden?
here is the code I am using:

$(document).ready(function() {
  $('#handler').hover(function(){$('#hidden').toggle(1000)});
});​

Can you please let me know how i can use jQuery easing plugin for something like this?
Thanks

Answer 1

Try slideToggle instead of toggle

http://jsfiddle.net/CGbCv/2/

The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline. When the height reaches 0 after a hiding animation, the display style property is set to none to ensure that the element no longer affects the layout of the page.

http://api.jquery.com/slideToggle/