嘗試在點擊時切換動畫

Question

我試圖在點擊時展開一個框，一旦再次點擊，我想將其縮回到其正常狀態。這是我現在的代碼。

$(".box").click(function() { 
    $(this).toggle(function() { 
     $(this).animate({ 
      width: "200px", 
      height: "200px" 
      }, "slow"); 
     }, function() { 
     $(this).animate({ 
      width: "50px", 
      height: "50px" 
      }, "slow"); 
     }); 
}); 

原始大小是50px，我希望它在50 px和200 px之間來回切換。使用此代碼，當單擊該框時，該框將消失。有什麼建議麼？

Answer 1

這是因爲您使用的是jQuery 1.9+，並且沒有jQuery .toggle()事件方法，因此jQuery使用.toggle()顯示效果方法並隱藏了您的元素。 .toggle()事件方法從jQuery 1.7開始被棄用，並且在jQuery 1.9中被刪除。

$(".box").click(function() { 
    var $this = $(this), 
     val = $this.height() == 200 ? '50px' : '200px'; 
    $this.stop().animate({ 
     width: val, 
     height: val 
    }, "slow"); 
}); 

http://jsfiddle.net/q9UMA/