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/

更新

对于一些不那么新的浏览器（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);
}

Answer 2

fadeIn's callback function可以解决您的问题。尝试这样的事情：

$this.siblings('.user_icon').find('.shadow-circle-lg').fadeIn(400, function() { (this).addClass('circle-highlight') });

如何通过jQuery addClass（）淡出box-shadow

2 个答案: