javascript - 如何用 jQuery 覆盖 CSS3 动画？

Question

我有几个持续几秒钟的元素的动画。当您将鼠标悬停在其中一个上时，我希望 CSS3 动画暂停并做一些事情，当悬停消失时，继续动画。

这是一个显示 CSS3 动画发生的快速示例小提琴，当您将鼠标悬停在第三个栏（使用类 .test）上时，它应该覆盖 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'); 
});

任何想法如何做到这一点？

Answer 1

希望这会有所帮助。

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

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

Answer 2

怎么样，只需使用 CSStransition吗？（在你的情况下）

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

演示：http: //jsfiddle.net/TmFFx/5/