我有一个 CSS 动画,我想以 200 毫秒的间隔应用它。我已经这样设置 CSS:
.discrete {
position:relative;
opacity:1;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;
}
.discrete.out {
left:-40px;
opacity:0;
}
然后我想错开应用.discrete.out
以 200 毫秒为间隔上课。我尝试过以下方法:
$('.discrete').each(function() {
$(this).delay(200).addClass('out');
});
和这个:
$('.discrete').each(function() {
var theNode = $(this);
setTimeout(function() {
theNode.addClass('out');
}, 200);
});
但在这两种情况下,动画都是同时发生的!
有任何想法吗?
你可以使用
var els = $('.discrete'),
i = 0,
f = function () {
$(els[i++]).addClass('out');
if(i < els.length) setTimeout(f, 200);
};
f();
Demo http://jsfiddle.net/56mUn/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)