How to override CSS3 animation with jQuery?

Question

I have an animation on a couple of elements that last a few seconds. When you hover over one of them, I want the CSS3 animation to pause and do something, and when hover comes off, to continue animation.

Here is a quick example fiddle that shows the CSS3 animation happening, and when you hover over the third bar (with class .test) it should override the CSS:

http://jsfiddle.net/TmFFx/

  @keyframes animation {
    from { width: 0;}
    to {width: 200px;}
}

@-webkit-keyframes animation {
    from { width: 0;}
    to {width: 100%;}
}

div {
    animation: animation 3s;
    -webkit-animation: animation 3s; 
    display:block;
    height:50px;
    background:red;
    margin-bottom:20px;
}
.change {width: 50%;}

  $('.test').hover( function() {
        $(this).toggleClass('change'); 
});

Any ideas how to do this?

ShujatAli · Accepted Answer · 2013-10-06 17:38:09Z

4

hope this will help.

  $('.test').hover(
      function(){
    $('div').css("-webkit-animation-play-state", "paused");
//do your stuff here

    },
      function(){
        $('div').css("-webkit-animation-play-state", "running");
    });

answered Oct 6, 2013 at 17:38

ShujatAli

1,3762 gold badges14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

l2aelba · Accepted Answer · 2013-10-06 17:39:48Z

0

What about, just use CSS with transition ? (in your case)

div {
    display:block;
    width:100%;
    height:50px;
    background:red;
    margin-bottom:20px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
div:hover {width:50%;}

Demo : http://jsfiddle.net/TmFFx/5/

answered Oct 6, 2013 at 17:39

l2aelba

22.3k23 gold badges108 silver badges145 bronze badges

Collectives™ on Stack Overflow

How to override CSS3 animation with jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related