使用jQuery。點擊和.toggle收縮和擴張的同心圓

Question

我試圖擴張和收縮的圓上用下面的代碼另一個圈子：

$(document).ready(function(){ 
    $("#inner-circle").click(function(){ 
    $("#inner-circle").toggle(
     function(){ 
     $(this).transition({ "height":'1.0em', 
          "width":'1.0em', 
          "margin-top":'3.2em', 
          "margin-left":'3.2em' 
          }, 1000); 
     }, 
     function(){ 
     $(this).transition({ "height":'1.875em', 
          "width":'1.875em', 
          "margin-top":'3.75em', 
          "margin-left":'3.75em' 
          }, 1000); 
     } 
    )}); 
}); 

$(document).ready(function(){ 
    $("#data1").hover(function(){ 
    $("#data1").toggle(
     function(){ 
     $(this).css({"background":"blue"}); 
     }, 
     function() { 
     $(this).css({"background":"red"}); 
     }, 
     function() { 
     $(this).css({"background":"orange"}); 
     }); 
    }); 
}); 

但表現出的實際行爲是絕對不我所期待的（和，奇怪的是，改變我是否運行過的jsfiddle或通過我的瀏覽器（Firefox）的HTML文件下面是的jsfiddle鏈接：

Answer 1

http://jsfiddle.net/Ue9pu/

任何幫助，將不勝感激。根據文件tquery，jquery.toggle（）用於顯示/隱藏元素，它不會像你打算的那樣通過在兩個函數之間進行切換來工作（所以你在做的是切換元素的可見性，切換之前有一個縮小的動畫它隱藏起來，那就是你所看到的）。另外，jquery.transition（）不存在，您可能需要jquery.animate（）。

我已經在這裏對您的代碼進行了更新http://jsfiddle.net/Ue9pu/4/。我已經改變了它，所以切換是通過一個布爾值內部完成的，而該布爾值反過來交替。現在你只需要獲得正確的動畫。

var tog = false; 
$("#inner-circle").click(function() { 
    if (tog) { 
     $(this).animate({ 
      "height": '1.0em', 
       "width": '1.0em', 
       "margin-top": '3.2em', 
       "margin-left": '3.2em' 
     }, 1000); 
    } else { 
     $(this).animate({ 
      "height": '1.875em', 
       "width": '1.875em', 
       "margin-top": '3.75em', 
       "margin-left": '3.75em' 
     }, 1000); 
    } 
    tog = !tog; 
});