0

私のスプライト アニメーションは奇数クリック (1、3、5 . .) でスイッチを下の位置に完全に動作しますが、偶数クリック (2、4、6 . .) でアニメーションを開始することはできません。それはスイッチを上の位置に置きます。クロス ブラウザーの CSS は投稿から削除されましたが、Fiddle にあります。

http://jsfiddle.net/aNsHU/8/

HTML

<div class="switch s-up"></div>

jQuery

$(document).ready(function() {

  $(".switch").click(function () {
    $(this).toggleClass("s-down s-up");
  });

})​

CSS

.switch{
  background: transparent url(http://i.imgur.com/taIR0.jpg);
  height:65px;
  width: 75px;
  margin-bottom:75px;
  cursor:pointer;
}
.s-down{
  animation: play .4s steps(5);
}
.s-up{
  animation: reverse .4s steps(5);
}
.switch.s-down{
  background: transparent url(http://i.imgur.com/taIR0.jpg) -300px 0;
}


@keyframes play {
   0% { background-position:    0px; }
   100% { background-position: -375px; }
}

@keyframes reverse {
   0% { background-position:   -375px; }
   100% { background-position: 0px; }
}​
4

1 に答える 1

0

問題を解決するために、最初のコードに影響を与えた人に連絡を取りました。s-up クラスには、再生アニメーションとリバース アニメーションの両方を含める必要があります。http://simurai.com/に感謝します。

.s-up{
  animation: play reverse .4s steps(5);
}

フィドル：

http://jsfiddle.net/simurai/hEfpt/

于 2013-01-12T20:09:40.363 に答える