Как анимировать при последовательных кликах с помощью jquery

Question

В принципе, я хочу, чтобы иметь возможность щелкнуть div, переместить его 50 пикселей влево, снова щелкнуть его, переместить его на 50 пикселей вниз, снова щелкнуть по нему и переместить 50 пикселей вправо, и нажмите его еще раз, и верните его в исходное положение, чтобы, если я нажму на него в 5 раз, цикл начнется снова. Я прочитал целую книгу по jQuery, но я все еще очень новичок в этом. Я попытался использовать оператор if, где он проверил бы css div, и если бы он был таким и был, он бы оживил его до правильной позиции, но проблема в том, что анимация объекта с jquery не изменяет его css, поэтому я бы Невозможно проверить, что это css в следующий раз, чтобы оживить его до следующей позиции. Теперь, я могу быть на совершенно неправильном пути с утверждением if. Мне не нужен кто-то, чтобы написать мой код для меня, просто ищет правильный IDEA. Есть ли обработчик, о котором я должен знать? Событие, которое мне нужно поймать? Как этот тип вещей обычно обрабатывается с помощью jQuery?

Подводя итог: как сделать объект анимацией циклическим способом (более двух анимаций) при последовательных кликах с помощью jquery?

Answer 1

Вот как это сделать:

var n = 0; 
$('#target').on('click', function() { 
    n++; 
    if (n == 5) { 
     n = 1; 
    } 
    if (n == 1) { 
     $(this).animate({ 
      'top': '-=50' 
     }); 
    } 
    if (n == 2) { 
     $(this).animate({ 
      'left': '+=50' 
     }); 
    } 
    if (n == 3) { 
     $(this).animate({ 
      'top': '+=50' 
     }); 
    } 
    if (n == 4) { 
     $(this).animate({ 
      'left': '-=50' 
     }); 
    } 
}); 

Live Demo: http://jsfiddle.net/tkirda/Yt6kJ/