How to fade in box-shadow via jQuery addClass()

css, jquery

Solution

Use can use a simple `transition` attribute:

.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);
}

Then just add the class. Don't call `fadeIn`

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

See a live example:

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

UPDATE

For some of the not-so-new browsers (Firefox 4, Opera), this would likely work:

.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);
}

Problem

UPDATED I have a div, .shadow-circle-lg: ``` <div class="shadow-circle-lg"></div> ``` I want to fade in a different border styling to the div, by adding another class, .circle-highlight: ``` .circle-highlight{ box-shadow: 0 0 0 1px rgba(0,0,0, 0.1), 0 0 0 10px rgba(188,190,192, 0.3); } ``` Result: ``` <div class="shadow-circle-lg circle-highlight"></div> ``` I want this transition to fadeIn over 400ms. I am trying solve this via a fadeIn animation with the function below: ``` $this.siblings('.user_icon').find('.shadow-circle-lg').addClass('circle-highlight').hide().fadeIn(400); ``` However, hiding the function this way first creates a "flash" effect as the original visible div disappears. I only want to fade in the box-shadow. Any ideas?

Original source