我试图用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>