如何为CSS框阴影深度设置动画（使用jQuery或CSS3过渡）？

Question

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.

Answer 1

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;

Answer 2

A jquery plugin was recently released that does this. Take a peak: Shadowmation