请问有没有什么办法。例如我有一个这样的动画 demo on Codepen . 500 毫秒后,下一个立方体将具有动画效果。如何在第一个动画时间的 1/2 后让下一个立方体动画。我知道如何使用 .animate() 来实现它,但这次是 .css() 并且我找不到实现它的方法。我很感激!
$(function() {
$('button.action').on('click', function() {
$('.wrap .item').each(function(i) {
var $item = $(this);
setTimeout(function() {
$item.css({
'opacity': 1,
'transform': 'translateX(0)'
});
}, 500*i);
});
});
});
下一个动画将从第一个动画时间的 1/2 开始。不是在第一个的末尾。
最佳答案
正如@disstruct 所建议的那样,您可以更改 CSS 并减少超时以达到炫酷的效果。我为任何想玩它的人准备了万能 fiddle - https://jsfiddle.net/skyr9999/rvknhq1m/
这是 html:
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<button class="action">Action!</button>
和 CSS:
.item {
display: block;
margin: 5px;
width: 60px;
height: 60px;
background-color: #cd3455;
transform: translateX(100px);
opacity: 0.5;
transition: all 1s cubic-bezier(.49,-0.57,1,.99)
}
.action {
position: absolute;
top: 5%;
right: 5%;
}
和JS:
$(function() {
$('button.action').on('click', function() {
var duration = 250; //reduce it to have cool effects
$('.wrap .item').each(function(i) {
var $item = $(this);
setTimeout(function() {
$item.css({
'opacity': 1,
'transform': 'translateX(0)'
});
}, duration*i);
});
});
});
关于javascript - 使用 jquery 错开 css 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42548187/