Сброс анимации CSS по массиву

Question

Попытка получить сброс анимации css всякий раз, когда я нажимаю на нем флажок. Он отлично работает для одного div, но я хочу, чтобы он работал для всех divs одновременно, поэтому я использовал for. Проблема заключается только в последнем сбросе div. Что я делаю не так? Любая помощь оценивается.

<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. Я знаю, что я должен использовать getElementById, но это не вариант, потому что это для плагина wordpress, и флажки не имеют идентификационных тегов.

Answer 1

Поскольку вы уже используете JQuery, вы действительно должны использовать его методы для максимальной совместимости браузера:

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

See JSFiddle Demo

Для получения дополнительной информации о том, как использовать одушевленные, чтобы получить желаемый эффект, см jQuery Documentation