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