如何通过jQuery addClass()淡出box-shadow

Question

更新

我有一个div,.shadow-circle-lg:

<div class="shadow-circle-lg"></div>

我希望通过添加另一个类,.circle-highlight来淡入与div不同的边框样式:

.circle-highlight{
box-shadow: 
0 0 0 1px rgba(0,0,0, 0.1),
0 0 0 10px rgba(188,190,192, 0.3);
 }

结果:

   <div class="shadow-circle-lg circle-highlight"></div>

我希望这种过渡能够超过400毫秒.

我正在尝试使用以下函数通过fadeIn动画解决此问题:

$this.siblings('.user_icon').find('.shadow-circle-lg').addClass('circle-highlight').hide().fadeIn(400);

但是,以这种方式隐藏功能首先会在原始可见div消失时创建"闪光"效果.我只想淡出盒子阴影.

有任何想法吗？

Answer 1

使用可以使用简单的transition属性:

.circle-highlight {
    transition: box-shadow 400ms;
    box-shadow: 
        0 0 0  1px rgba(  0,  0,  0, 0.1),
        0 0 0 10px rgba(188,190,192, 0.3);
}

然后只需添加该类.不要打电话fadeIn

$this.siblings('.user_icon')
        .find('.shadow-circle-lg')
        .addClass('circle-highlight');

查看实例:

http://jsfiddle.net/MTz8E/1/

UPDATE

对于一些不那么新的浏览器(Firefox 4,Opera),这可能会起作用:

.circle-highlight {
       -moz-transition: box-shadow 400ms; /* Firefox 4 */
         -o-transition: box-shadow 400ms; /* Opera     */
    -webkit-transition: box-shadow 400ms; /* Chrome    */
            transition: box-shadow 400ms;

    box-shadow: 
        0 0 0  1px rgba(  0,  0,  0, 0.1),
        0 0 0 10px rgba(188,190,192, 0.3);
}