这确实会延迟,但似乎直到最后才应用样式更改:
for (i=20;i>=0;i--) {
var boxShadow = i+"px "+i+"px "+i+"px #888";
$('article').css("box-shadow", boxShadow);
sleep(20);
}
function sleep(ms)
{
var dt = new Date();
dt.setTime(dt.getTime() + ms);
while (new Date().getTime() < dt.getTime());
}
这根本不适用于延迟:
for (i=20;i>=0;i--) {
var boxShadow = i+"px "+i+"px "+i+"px #888";
$('article').delay(500).css("box-shadow", boxShadow);
}
使用css3转换可以更容易地完成这项工作吗?我只是在延迟样本中犯了一些小的jquery错误吗?
感谢任何能提供帮助的人。
您可以使用类和setTimeout
来利用CSS3转换来获得动画效果:
CSS--
#some-element {
-webkit-transition : all 0.5s linear;
-moz-transition : all 0.5s linear;
-ms-transition : all 0.5s linear;
-o-transition : all 0.5s linear;
transition : all 0.5s linear;
}
#some-element.ani-state {
-webkit-box-shadow : 0 0 24px #000;
-moz-box-shadow : 0 0 24px #000;
box-shadow : 0 0 24px #000;
}
由于Chrome的缘故,我在转换声明中使用了all
。。。Chrome的一些版本使用CCD_ 3,而较新版本使用CCD_。如果您不更改元素的任何其他属性(或者如果您想设置这些属性更改的动画),all
就没什么大不了的了。
JS--
$(function () {
var $someElement = $('#some-element');
$someElement.on('click', function () {
$someElement.addClass('ani-state');
setTimeout(function () {
$someElement.removeClass('ani-state');
}, 500);
});
});
下面是一个演示:http://jsfiddle.net/jasper/tvfPq/1/
注意,在演示中,我使用了两个box-shadows
:box-shadow : 0 0 24px #000, inset 0 0 24px #999;
最近发布了一个jquery插件来实现这一点。达到峰值:阴影