1

画像コンテンツがあるdivがあります。画像をクリックしたときにアニメーションを実装したいのですが、最初のクリックでのみ実行され、画像の次のクリックは効果がありません。問題とは何ですか。どうすれば解決できますか？

$(function () {
         $('div.c').bind('mousedown', function () {
             var $elem = $(this);
             $elem.stop(true)
             .css({ "-webkit-animation-name": "xi",
             "-webkit-animation-duration": "3s",
             "-webkit-animation-timing-function": "ease", 
             "-webkit-animation-delay": "1s",            
              })
              })})

と

     @-webkit-keyframes xi{ 0% {
  left: 100px;
}

40% {
  left: 150px;
}

60% {
  left: 75px;
}

100% {
  left: 100px;
}}
4

1 に答える 1

1

ここで提案されているように、2番目のキーフレームブロックを使用してアニメーションをリセットできます 。CssとjQuery：CSS3アニメーション要素の再配置をトリガーしてアニメーション前の位置に戻すにはどうすればよいですか？

アニメーションが完了したときにアニメーションをリセットする方法についても、考えられる解決策 があります。CSS3アニメーションの完了時にコールバックはありますか？

于 2012-07-01T06:49:36.527 に答える