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

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

Don't use `.bind()`, it's deprecated. You should be using `.on()` and `.off()`. — Barmar, Jan 21 '20 at 00:56
I don't know, but most of the time you should use the clearest code, and only worry about efficiency if it turns out to be a problem. — Barmar, Jan 21 '20 at 15:28

score 1 · Accepted Answer · answered Jan 21 '20 at 01:00

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

jQuery: Unbinding transtionend event

1 Answers1