如何设置CSS框阴影深度的动画(使用jQuery或CSS3转换）

How do I animate CSS box-shadow depth (with jQuery or CSS3 transitions)?

本文关键字：jQuery 使用 动画 转换 CSS3 阴影 何设置 设置 CSS 深度      更新时间：2023-09-26

这确实会延迟，但似乎直到最后才应用样式更改：

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插件来实现这一点。达到峰值：阴影

相关文章：