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

Question

我正在尝试用 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>

Answer 1

您可以试试下面的方法。有一个 '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>

希望对您有所帮助。

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

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

html

javascript

css

jquery

css-animations