如何用jQuery覆蓋CSS3動畫？

Question

我有幾個元素，持續幾秒鐘的動畫。當你將鼠標懸停在其中一個上面時，我希望CSS3動畫暫停並執行某些操作，當懸停彈出時，繼續動畫。

下面是一個簡單的例子小提琴，顯示CSS3動畫發生的事情，當你將鼠標懸停在第三棒（帶班。測試），它應該覆蓋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

怎麼樣，只用CSS與transition？ （你的情況）

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/