如何控制css3动画属性'animation-duration'与jQuery

how to control css3 animation property 'animation-duration' with jQuery?

本文关键字：animation-duration jQuery 属性 动画 何控制 控制 css3      更新时间：2023-09-26

我试图用jQuery控制CSS3动画属性 animation-duration 。但我的剧本却不是这样。如果有什么解决办法，请告诉我。

片段: 

jQuery(document).ready(function() {
  var incleft = jQuery('.basic-details').attr('data-duration');
  var i = incleft;
  jQuery('#button').click(function() {
    alert(123);
    for (i = 0; i < 10; i++) {
      jQuery('.basic-details').css('animation-duration', i);
    }
  });
});
.basic-details {
  width: 60px;
  height: 60px;
  background-color: #f00;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: rotate(0deg);
  animation-name: movement;
  animation-duration: 0s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-delay: 0s;
  animation-play-state: running;
  animation-fill-mode: forwards;
}
@keyframes movement {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="basic-details" data-duration="0"></div>
<button id="button" style="width: 100px; height: 40px; position:fixed; bottom: 0px;"></button>

您可以尝试以下操作。有一个's'需要追加，你需要通过使用eq()方法来瞄准每个.basic-details元素。

$(document).ready(function() {
  $('.basic-details').each(function(index) {
    $(this).css('left', index * parseInt($(this).css('width')));
  });
  $('#button').click(function() {
    var numDetails = $('.basic-details').length;
    for (var i = 0; i < numDetails; i++) {
      $('.basic-details').eq(i).css('animation-duration', $('.basic-details').eq(i).data('duration') + 's');
    }
  });
});
.basic-details {
  width: 60px;
  height: 60px;
  background-color: #f00;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: rotate(0deg);
  animation-name: movement;
  animation-duration: 0s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-delay: 0s;
  animation-play-state: running;
  animation-fill-mode: forwards;
}
@keyframes movement {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="basic-details" data-duration="1"></div>
<div class="basic-details" data-duration="2"></div>
<div class="basic-details" data-duration="4"></div>
<div class="basic-details" data-duration="8"></div>
<button id="button" style="width: 100px; height: 40px; position:fixed; bottom: 0px;"></button>

相关文章：