jQuery .animate() establece la visualización: ninguno, ¿cómo evitarlo?

Question

tengo el siguiente código:

HTML:

<div id="clickme"> 
    Click me :-) 
</div> 

<div id="info" style="background:red; width:100%; height:100px; margin-bottom:-100px; z-index:20; position:absolute; bottom:0px;"> 
    Stay, damn! 
</div> 

JavaScript:

$('#clickme').click(function() { 
    $('#info').animate({ 
     marginBottom: 'toggle' 
    },{ 
     duration:500 
    }); 
}); 

También está disponible en http://jsfiddle.net/DxnQJ/

Obviamente, quiero que el #info DIV a aparecer/desaparecer cada vez Se hace clic en #clickme DIV. Funciona según lo previsto, excepto que el #info DIV desaparece después de la animación debido a que jQuery establece su propiedad CSS display en none.

¿Cómo puedo decirle a jQuery que deje de ocultar mi DIV?

Answer 1

yo recomendaría usar .slideToggle:

$('#clickme').click(function() { 
    $('#info').slideToggle(500); 
}); 

Demostración: http://jsfiddle.net/Daniel_Hug/DxnQJ/2

Answer 2

código javascript

$('#clickme').toggle(
     function() { 
      $('#info').animate({ 
       height:"0px" 
      }, 500); 
     }, 
     function() { 
      $('#info').animate({ 
       height:"100px" 
      }, 500); 
     }); 

http://jsfiddle.net/amkrtchyan/zymUK/2/

Answer 3

El cambio de su función de clic con esto funciona:

$('#clickme').click(function() { 
     var whichSetting = $('#info').css('marginBottom'); 
     if(whichSetting == '-100px') { 
      whichSetting = '0px'; 
     } 
     else { 
      whichSetting = '-100px'; 
     } 
     $('#info').animate({ 
      marginBottom: whichSetting 
      },{ 
       duration:500 
     }); 

    });