jQuery: Unbinding transtionend event

Question

I want an object to move first left, then up, every time I call this action. It works fine the first time, but on second time, the object moves diagonally not in steps.

Currently I have this:

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

1. Any other suggestions on how to achieve stepped animation?
2. How do I unbind both of those "bindings" so it run like first time on every action?

Answer 1

You need to remove the old bindings with .off(). Otherwise, you're accumulating multiple event handlers, and they all run whenever one of the events occurs.

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);
      });
});