Jquery IF ELSE動畫

Question

一直在學習Jquery，並試圖編寫一點點代碼，當你點擊一個按鈕時做一個動畫，當你再次點擊時做相反的動作（基本上每次你從右向左移動一個圓圈點擊該按鈕很簡單的動畫，只是努力得到它使用jQuery中的if/else語句）

目前做到這一點我在：

$(document).on('click', '#sub', function(){ 
var moved = 0; 
if (moved == 0) { 
    $('.circle').animate({'margin-left': "300px"}); 
    moved = 1; 
} 
else{ 
    moved = 0; 
    $('.circle').animate({'margin-left': "-300px"}); 
} 
});  

所以我試圖移動.circle右邊300px，它運行的if語句部分罰款，當我改變移動到值1沒有任何反應。我應該使用一個while循環，還是應該以不同的方式做些什麼？

Answer 1

你應該更全局地聲明你的moved var。現在，當點擊事件被觸發時，moved將始終爲0，因爲它是以這種方式設置的。

(function() { 
    var moved = 0; 

    $(document).on('click', '#sub', function(){ 
     if (moved == 0) { 
      $('.circle').animate({'margin-left': "300px"}); 
      moved = 1; 
     } 
     else{ 
      moved = 0; 
      $('.circle').animate({'margin-left': "-300px"}); 
     } 
    }); 
})(); 

現在它將在點擊事件範圍之外「保存」moved變量的狀態。

編輯，一點點額外的較短版本的代碼：

(function() { 
    var moved = 0; 
    $(document).on('click', '#sub', function(){ 
     $('.circle').animate({ 
      'margin-left': (moved ? "-300" : 300) + "px" 
     }, 500, 'swing', function() { 
      moved = !moved; 
      // or 
      moved = (moved ? 0 : 1); 
     }); 
    }); 
})(); 

Answer 2

嘗試類似這樣的事情。當您第一次點擊並在第二次點擊時將其刪除時，向該元素添加類。

$(document).on('click', '#sub', function(){ 

if($('.circle').hasClass("clicked")){ 
    $('.circle').animate({'margin-left': "300px"}); 
    $('.circle').removeClass("clicked"); 
}else{ 
    $('.circle').animate({'margin-left': "-300px"}); 
    $('.circle').addClass("clicked"); 
} 

}); 

Answer 3

你設置你的if語句前剛搬到= 0每次...

$(document).on('click', '#sub', function(){ 
    var moved = 0; // <- This line here! 
    if (moved == 0) { 
    $('.circle').animate({'margin-left': "300px"}); 
    moved = 1; 
    } 
    else{ 
     moved = 0; 
     $('.circle').animate({'margin-left': "-300px"}); 
    } 
}); 

你需要移動的功能外的聲明，以便它不會重置每次它。

Answer 4

根據需要支持的瀏覽器，它可能會更好，以動畫的手的CSS。 單擊圓形並使用css轉換時，可以輕鬆切換類。

事情是這樣的： JS

$('.circle').on('click', function() { 
    $(this).toggleClass('clicked'); 
} 

CSS

.circle { transition: margin-left 0.2s; margin-left: -300px; } 
.circle.clicked { margin-left: 3OOpx; }