CODEWITHSUNDEEP
javascriptjquerycss
clamp
clamp

Reputation: 34036

Prevent jumping to start of next animation while current animation is running

i am animation a dom-object with jquerys mouseover/mouseout events. this works fine, unless the mouse is entered/exited while the previous animation is running. it then jumps to the start of the next animation which looks ugly.

how can this be avoided?

$("#leftlogo").on("mouseover", function(t) {
    $(t.target).css("animation-name", "left-over");
}).on("mouseout", function(t) {
    $(t.target).css("animation-name", "left-out");
});

Upvotes: 1

Views: 71

Answers (2)

iamnotsam
iamnotsam

Reputation: 10448

My advice is to avoid smoothing out keyframe animations with hairy CSS3 animation events and use transition instead. I know what you are asking, but I am giving this alternative to possibly save you a cup of code whereas you may only need a teaspoon. In a few years maybe it'll be cleaner.

http://jsbin.com/kabep/2/edit?html,css,output

#leftlogo {
  transition: all 1s;
  background: pink;
}

#leftlogo:hover{
  background: yellow;  
}

Upvotes: 1

mc01
mc01

Reputation: 3780

CSS3 animation events: http://www.sitepoint.com/css3-animation-javascript-event-handlers/

Instead of chained jQuery calls, you could use 1 .on() handler for multiple events, including the CSS3 animationend event. 

  //set boolean when animating 
  var isAnimating = false;

  $("#leftlogo").on({ 
    //handle mouseover
    "mouseover": function(t) {
     $(t.target).css("animation-name", "left-over");
     isAnimating = true;
    }, 
    //handle animationend event
    "animationend": function(e) {
        if (e.animationName == "animation-name")      
         {  isAnimating = false; }
    },
    //handle mouseout
   "mouseout": function(t) {
    while (isAnimating != false) 
      { 
        //hang on a sec
      };

      $(t.target).css("animation-name", "left-out");
    });

Note this hasn't been tested - you might need to play w/the conditionals.

Also not reflected here is the idea that it's better practice to use .addClass() and .removeClass() instead of .css(). That keeps your style definitions in the CSS & only the logic in JS.

Upvotes: 2

Related Questions