CODEWITHSUNDEEP
jquerytransitiontransitionend
yodalr
yodalr

Reputation: 10932

jQuery: Unbinding transtionend event

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?

Upvotes: 0

Views: 53

Answers (1)

Barmar
Barmar

Reputation: 782130

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

Upvotes: 1

Related Questions