隱藏和顯示左面板的jQuery動畫方法

Question

我試圖用jQuery實現簡單的動畫。這是我的代碼：

<div> 
    <div id="leftPannel" style="height: 500px; width: 200px; background-color: Olive; 
     float: left; display: none"> 
    </div> 
    <div id="rest" style="height: 500px; width: 400px; float: left; margin-left: 10px; 
     background-color: Purple"> 
     <input type="button" id="Display" value="Display" /></div> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#Display').click(function() { 
      var status = $('#leftPannel').css("display"); 
      if (status == "none") { 
       $('#leftPannel').animate({ display: 'show' }, "slow") 
      } 
      else { 
       $('#leftPannel').animate({ display: 'hide' }, "slow") 
      } 

     }); 
    }); 
</script> 

問題是當左側面板被隱藏，它顯示與點擊事件。但再次點擊它不會再隱藏。爲什麼其他人沒有執行？

Answer 1

你也可以試試這個

$(document).ready(function() { 
    $('#Display').click(function() { 
      $('#leftPannel').animate({width: 'toggle'}); 
    }); 
}); 

Answer 2

嘗試這樣：

$(document).ready(function() { 
    $('#Display').click(function() { 
     $('#leftPannel').slideToggle(); 
    }); 
}); 

我建議.slideToggle()方法，因爲你試圖.animate()。如果你想要簡單的.show()和.hide()，你也可以使用.toggle()方法。

UPDATE：清理些亂七八糟

如果你要使用/學習.animate()方法，請嘗試使用元素的可見性;通過獲得.css('display')來嘗試。這是一個更好的方法。嘗試，

$('#Display').click(function() { 
    if($('#leftPannel').is(":visible")){ 
     // write animate method if visible 
    } 
    else{ 
     // if not visible 
    } 
});