如何使用jQuery控制CSS3动画属性“动画持续时间”？

Question

I am trying to control CSS3 animation property animation-duration with jQuery. But its not happening with my script. Please let me know if there is any solution.

Snippet:

 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

You can try the below. There was an 's' that needed to be appended and you needed to target each of the .basic-details element via the use of eq() method.

 $(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> 

Hope this helps.