jQuery: Отмена привязки

Question

Я хочу, чтобы объект двигался сначала влево, а затем вверх, каждый раз, когда я вызываю это действие. Он отлично работает в первый раз, но во второй раз объект движется по диагонали, а не по шагам.

В настоящее время у меня есть это:

myObject.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ 
    myObject.css("left", 100);
    myObject.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
        myObject.css("top", 50);
    });
});

1. Любые другие предложения о том, как достичь пошаговая анимация?
2. Как мне отменить привязку этих «привязок», чтобы они запускались как первый раз при каждом действии?

Answer 1

Вам нужно удалить старые привязки с помощью .off(). В противном случае вы накапливаете несколько обработчиков событий, и все они запускаются всякий раз, когда происходит одно из событий.

myObject.off("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd")
  .on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd"),
  function() {
    myObject.css("left", 100);
    myObject.off("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd")
      .on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd"),
      function() {
        myObject.css("top", 50);
      });
});