Question

I have a div that uses .animate. I have the div css at:

 position:fixed; 
 bottom:-240px; 

and the animate script is:

 $("#media").click(function () {
 $("#mediadetails").animate({height: "425px"}, 1000);

with a special div close:

 $("#mediaclose").click(function() {
 $("#mediadetails").toggle(2000);

The initial animate works fine– you hit the close button and the div closes. But if you hit the media link again, it will not animate again.

Any ideas?

Answer 1

This is because .toggle() will just hide the element without changing the height (it does indeed change the height but also the width and opacity). The next .animate() will only change the height, the width and opacity will remain unchanged.

$('#mediaclose').click(function() {
    $('#mediadetails').animate({height: "0px"}, 2000);
});