This does do the delays but doesn't seem to apply the style changes until the end:
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());
}
This doesn't apply the delays at all:
for (i=20;i>=0;i--) {
var boxShadow = i+"px "+i+"px "+i+"px #888";
$('article').delay(500).css("box-shadow", boxShadow);
}
Can this be done more easily with css3 transitions? Am I just making some small jquery error in the delay sample?
Thank you to anyone who can help.
You can use classes and setTimeout
to utilize CSS3 transitions for your animation effect:
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;
}
I used all
for the transition declarations because of Chrome... some versions of Chrome use -webkit-box-shadow
and newer versions use box-shadow
. all
isn't a big deal if you aren't changing any other properties of the element (or if you want to animate those property changes).
JS --
$(function () {
var $someElement = $('#some-element');
$someElement.on('click', function () {
$someElement.addClass('ani-state');
setTimeout(function () {
$someElement.removeClass('ani-state');
}, 500);
});
});
Here is a demo: http://jsfiddle.net/jasper/tvfPq/1/
Note that in the demo I used two box-shadows
: box-shadow : 0 0 24px #000, inset 0 0 24px #999;
A jquery plugin was recently released that does this. Take a peak: Shadowmation
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.