jQuery CSS3动画

Question

I have problem with my action button. I wanted to play animation in CSS3 when I click it. But when I click the button nothing happens. Here's my code:

HTML:

<section class="row" id="dice_canvas">

    <div class="col-lg-12">
        <div class="wrap">
            <div class="dice" id="number_location2">
                <div class="front">1</div>
                <div class="back">2</div>
                <div class="top">3</div>
                <div class="bottom">4</div>
                <div class="left">5</div>
                <div class="right">6</div>
            </div>
        </div>
    </div>

</section>

<section class="row" id="buttons">

    <div class="col-lg-12 font padding_btn">

        <button class="btn btn-info font" id="btn_roll" onClick="roll()">Rzuć Kostką</button>

    </div>

</section>

---

CSS:

 .dice { -webkit-transform-style: preserve-3d; position:relative; margin: 90px auto 90px auto; text-align:center; width:200px; height:200px; background:white; height:200px; /* vertical align need this line <-----*/ line-height: 200px; /* and this line <----- */ } .animacja{ -webkit-animation: trzesie; -webkit-animation-duration: 0.7s; } @-webkit-keyframes trzesie /* Safari and Chrome */ { /* 0% {-webkit-transform: rotate(0deg); top:0px;} 5% {-webkit-transform: rotate(45deg); top:-100px;} 10% {-webkit-transform: rotate(0deg);} 15% {-webkit-transform: rotate(-45deg);} 20% {-webkit-transform: rotate(0deg);} 25% {-webkit-transform: rotate(45deg);} 30% {-webkit-transform: rotate(0deg);} 35% {-webkit-transform: rotate(-45deg);} */ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(360deg); } } .back { background:url('grafika/1.jpg'); background-size:100% 100%; transform: translateZ(-100px) rotateY(180deg); -webkit-transform: translateZ(-100px) rotateY(180deg); } .right { background:url('grafika/2.jpg'); background-size:100% 100%; transform: rotateY(-270deg) translateX(100px); transform-origin: top right; -webkit-transform: rotateY(-270deg) translateX(100px); -webkit-transform-origin: top right; } .left { background:url('grafika/3.jpg'); background-size:100% 100%; transform: rotateY(270deg) translateX(-100px); transform-origin: center left; -webkit-transform: rotateY(270deg) translateX(-100px); -webkit-transform-origin: center left; } .top { background-color:gray; background-size:100% 100%; transform: rotateX(-90deg) translateY(-100px); transform-origin: top center; -webkit-transform: rotateX(-90deg) translateY(-100px); -webkit-transform-origin: top center; } .bottom { background-color:black; transform: rotateX(90deg) translateY(100px); transform-origin: bottom center; -webkit-transform: rotateX(90deg) translateY(100px); -webkit-transform-origin: bottom center; } .front { background:url('grafika/4.jpg'); background-size:100% 100%; transform: translateZ(100px); -webkit-transform: translateZ(100px); } 

---

JQuery:

 $("#btn_roll").click(function() { $("#number_location2").addClass('animacja'); }); 

---

Thanks for help :)

Answer 1

as i can see you have onClick="roll()" declared inline with your button tag like this :

<button class="btn btn-info font" id="btn_roll" onClick="roll()">Rzuć Kostką</button>

with this you should have some function called roll() which will be executed on click, and at the same time you have this code :

$("#btn_roll").click(function() {
    $("#number_location2").addClass('animacja');
});

which will be executed too when you click the same button ! so jQuery can't decide which function to execute ! roll() or the code $("#number_location2").addClass('animacja'); , so remove one from the two, if you want for example the code $("#number_location2").addClass('animacja'); to be executed, remove onClick="roll() from your html code

Answer 2

See a working demo here . your problem is the button could only be excuted once. you have to set a delay for removal of your class .animacja so that you can click the button again.

(function($){
    $.fn.extend({ 
        diceRoll: function(className, duration) {
            var elements = this;
            setTimeout(function() {
                elements.removeClass(className);
            }, duration);
            return this.each(function() {
                $(this).addClass(className);
            });
        }
    });
})(jQuery);

$("#btn_roll").click(function() {
    $("#number_location2").diceRoll('animacja', 2000);

});

Answer 3

You just need to put your jquery code in to

$(document).ready(function(){
    $("#btn_roll").click(function() {
        $("#number_location2").addClass('animacja');
    });
});