如何使用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