jQuery .animate() bộ hiển thị: không, cách tránh?

Question

Tôi có đoạn mã sau:

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 
    }); 
}); 

Nó cũng có sẵn tại http://jsfiddle.net/DxnQJ/

Rõ ràng, tôi muốn #info DIV xuất hiện/biến mất bất cứ khi nào các #clickme DIV được nhấp. Nó hoạt động như dự định, ngoại trừ việc #info DIV biến mất sau khi hoạt ảnh do jQuery đặt thuộc tính CSS display thành none.

Làm cách nào để tôi có thể yêu cầu jQuery ngừng ẩn số DIV của mình?

Answer 1

tôi sẽ khuyên bạn sử dụng .slideToggle:

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

Demo: http://jsfiddle.net/Daniel_Hug/DxnQJ/2

Answer 2

mã javascript

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

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

Answer 3

Thay thế chức năng nhấp chuột của bạn với điều này hoạt động:

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

    });