如何通過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);
}

Answer 2

fadeIn的回調函數可以解決您的問題。 嘗試這樣的事情：

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