Question

每当我按下页面上的复选框时，尝试重置css动画。它适用于单个div，但我想让它同时适用于所有div，所以我使用了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插件，而且复选框没有id标签。

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

CSS动画重置在数组上

1 个答案: