CODEWITHSUNDEEP
javascriptjquerycssarraysanimation
user7427012
user7427012

Reputation:

CSS animation reset on an array

Trying to get a css animation reset whenever I press a checkbox on the page. It works fine for a single div but I want to get it to work for all divs at the same time so I used a for. The problem is only the last div resets. What am I doing wrong? Any help appreciated. 

<div class="total">Subtotal: $300</div>
<div class="total">Subtotal: $300</div>
<div class="total">Subtotal: $300</div>
  <div class="produse">
    <input type="checkbox" name="product" value="Logo design">I have a bike
    <br><input type="checkbox" name="product" value="Website layout">I have a car 
</div>

jQuery(document).ready(function($){
$(":checkbox").on("click", function(){
    // restart animation
    var totalcl = document.getElementsByClassName("total");
    var tlength = document.getElementsByClassName("total").length;
  for (i=0; i<tlength; i++){
    totalcl = document.getElementsByClassName("total")[i];
    totalcl.style.webkitAnimation = 'none';
    setTimeout(function() {
         totalcl.style.webkitAnimation = '';
    }, 10);   
  }
});
});

PS. I know I should be using getElementById but it's not an option because it's for a wordpress plugin and the checkboxes don't have id tags.

Upvotes: 0

Views: 103

Answers (1)

bbailes
bbailes

Reputation: 371

Since you are already using jQuery, you should really use it's methods for maximum browser compatibility:

jQuery(document).ready(function($){
    $(":checkbox").on("click", function(){
        // restart animation
        $(".total")
            .css({
                fontSize: ""
             })
            .animate({ fontSize: "24px" }, 1000 );
    });
});

See JSFiddle Demo

For more information on how to use animate to get your desired effect, see the jQuery Documentation

Upvotes: 1

Related Questions