如何使用jquery動畫來回移動多個元素

Question

我一直在處理以下代碼以便來回移動div，但似乎有一個問題，當div被切換時，一旦某個項目被點擊，它會切換，但會影響下一個項目被點擊的時間。任何建議，使這個項目來回切換平等和只向左或向右一步。 這裏是我的小提琴https://jsfiddle.net/z3L8wbt6/

var move = 200; 
$('#main div').click(function(){ 
    $(this).animate({ 
     left: "+="+move 
    }, 200); 
    move =-move; 
}); 

Answer 1

使用jQuery功能addClass，removeClass和hasClass，我創建了一個簡單的if/else語句獨立於其他的div控制每個 div的運動。

if ($(this).hasClass("moved")) { 
    move = -200; 
    $(this).removeClass("moved"); 
} else { 
    move = 200; 
    $(this).addClass("moved"); 
} 
$(this).animate({ 
    left: "+=" + move 
}, 200); 

JSFiddle