Déclencheur css3 images clés à l'aide de jquery

J'ai écrit une animation avec des images clés:

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

Je veux exécuter cette animation sur un rectangle que j'ai faite en utilisant le code html suivant et le code de requête de code:

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

Le truc, c'est que rien ne se passe lorsque je clique sur le bouton. Je ne suis pas très bon avec jquery façon à ce que pourrait être le problème.

Merci beaucoup pour votre aide!

Matt

OriginalL'auteur Matt1510 | 2011-12-19

  1. 6

    Vous êtes en train d'ajouter des événements de clic pour ajouter et supprimer la classe sur le même bouton. Le résultat net est que l'élément sera à l'identique de quand il a commencé. Essayez à l'aide de boutons séparés pour commencer.

    J'ai essayé mais ça ne fonctionne toujours pas...
    Aussi, vous avez défini une classe cubebox, mais vous êtes en train d'ajouter la classe cubemove.
    Je l'ai vu, j'ai fait une erreur lors de la copie.

    OriginalL'auteur robertc

  2. 3

    J'ai trouvé le problème. C'était une requête de conflit problème.
    J'ai utilisé le code suivant et cela a fonctionné.

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

</script>

    OriginalL'auteur Matt1510

  3. 0

    Je vous recommande également d'essayer ce plugin jquery qui peut ajouter dynamiquement des animations css3 pour les éléments et un tas d'extra enfourne: https://github.com/krazyjakee/jQuery-Keyframes

    OriginalL'auteur Jake Cattrall