I want ...">
Geek Answers Handbook

How to fade in shadow box via jQuery addClass ()

UPDATED

I have a div, .shadow-circle-lg:

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

I want to link to a different border style with a div by adding another .circle-highlight class:

.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 need this transition for fadeIn for more than 400 ms.

I am trying to solve this problem using fadeIn animation with the following function:

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

However, by hiding the function in this way, the “flash” effect is first created when the original visible div disappears. I only want to disappear in the shadow of the window.

Any ideas?

+4
source share
2 answers

Usage can use a simple attribute 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);
}

Then just add the class. Do not callfadeIn

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

See a live example:

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);
}
+6

fadeIn .   - :

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

More articles:


All Articles