UPDATED
I have a div with the class .shadow-circle-lg:
<div class="shadow-circle-lg"></div>
To add a different border styling to the div, I am using another class called .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);
}
The end result should look like this:
<div class="shadow-circle-lg circle-highlight"></div>
I would like this transition to fade in over a duration of 400ms.
I am attempting to achieve this using a fadeIn animation with the following code:
$this.siblings('.user_icon').find('.shadow-circle-lg').addClass('circle-highlight').hide().fadeIn(400);
However, by hiding the function in this manner first, it creates a "flash" effect as the original visible div disappears. My goal is to only fade in the box-shadow without any other effects.
Do you have any suggestions on how to accomplish this?