fotogrammi chiave trigger CSS3 utilizzando jQuery

Question

ho scritto un'animazione fotogramma chiave:

@-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; 
} 

Voglio correre questa animazione su un rettangolo che ho fatto utilizzando il seguente codice HTML e richiesta del codice:

<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> 

La cosa è che non succede niente quando clicco sul pulsante. Non sono molto bravo con jquery, quindi potrebbe essere il problema.

Grazie mille per il vostro aiuto!

Matt

Answer 1

Ho trovato il problema. Era un problema di conflitto di query. Ho usato il seguente codice e ha funzionato.

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

</script> 

Answer 2

Stai salvando eventi click sia per aggiungere e rimuovere la classe per lo stesso pulsante. Il risultato netto è che l'elemento si troverà in uno stato identico a quando è iniziato. Prova a usare per separare i pulsanti per iniziare.

Answer 3

vi consiglio di provare anche questo plugin jQuery che può aggiungere dinamicamente le animazioni CSS3 a elementi e un gruppo di animali in più: https://github.com/krazyjakee/jQuery-Keyframes