0

数秒間続くいくつかの要素のアニメーションがあります。それらのいずれかにカーソルを合わせると、CSS3 アニメーションが一時停止して何かを実行し、ホバーが外れたときにアニメーションを続行するようにします。

CSS3 アニメーションが発生していることを示すフィドルの簡単な例を次に示します。3 番目のバー (class .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'); 
});

これを行う方法はありますか？

4

2 に答える 2

4

これが役立つことを願っています。

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

    },
      function(){
        $('div').css("-webkit-animation-play-state", "running");
    });
于 2013-10-06T17:38:09.543 に答える
0

どうですか、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/

于 2013-10-06T17:39:48.590 に答える