Trigger CSS3 ключевые кадры с помощью JQuery

Question

Я написал ключевых кадров анимации:

@-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, так что это может быть проблемой.

Большое вам спасибо за помощь!

Matt

Answer 1

Я нашел проблему. Это была проблема конфликта запросов. Я использовал следующий код, и он сработал.

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

</script> 

Answer 2

Вы хотите добавить событие нажатия на оба добавлять и удалять класс к одной и той же кнопке. Конечным результатом является то, что элемент будет находиться в идентичном состоянии, когда он начнется. Попробуйте использовать отдельные кнопки для начала.

Answer 3

Я рекомендую вам попробовать этот JQuery плагин, который может динамически добавлять CSS3 анимацию на элементы и кучу дополнительного питания: https://github.com/krazyjakee/jQuery-Keyframes