5

キーフレームアニメーションを書きました：

@-webkit-keyframes cubemove {
0% {-webkit-transform: translateZ(-194px) rotateY(0deg);}
20% {-webkit-transform: translateZ(-194px) rotateX(-180deg);}
40% {-webkit-transform: translateZ(-194px) rotateX(-90deg);}
60% {-webkit-transform: translateZ(-194px) rotateX(90deg);}
80% {-webkit-transform: translateZ(-488.5px) rotateY(90deg);}
90% {-webkit-transform: translateZ(-488.5px) rotateY(-90deg);}
100% {-webkit-animation-play-state:paused;}
}

.cubebox {
-webkit-animation: cubemove 30s ease-in-out 5s 1 normal;
}

次の html とクエリ コード コードを使用して作成した四角形でこのアニメーションを実行したいと思います。

<figure id="box">
<img src="/images/cube/step1.jpg"/>
<img src="/images/cube/step2.jpg"/>
<img src="/images/cube/step3.jpg"/>
<img src="/images/cube/step4.jpg"/>
<img src="/images/cube/step5.jpg"/>
<img src="/images/cube/step6.jpg"/>
</figure>

<button class="commencer">Start</button>

<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function(){
    $('.commencer').click(function(){
        $('#box').addClass('cubemove');
    });

    $('.commencer').click(function(){
        $(this).removeClass('cubemove');
    });
});

</script>

問題は、ボタンをクリックしても何も起こらないということです。私はjqueryがあまり得意ではないので、それが問題かもしれません。

ご助力ありがとうございます！

マット

4

3 に答える 3

6

クリック イベントを追加して、クラスを同じボタンに追加および削除します。最終的な結果として、要素は開始時と同じ状態になります。最初はボタンを区切るために使用してみてください。

于 2011-12-19T22:54:14.197 に答える
4

問題が見つかりました。クエリの競合の問題でした。次のコードを使用しましたが、うまくいきました。

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery(".commencer").click(function(){
        jQuery("#box").addClass("cubebox");
    });
});

</script>
于 2011-12-20T13:49:17.443 に答える
0

css3アニメーションを要素やその他の要素に動的に追加できるこのjqueryプラグインも試してみることをお勧めします：https ：//github.com/krazyjakee/jQuery-Keyframes

于 2012-09-15T16:10:29.760 に答える