title: How to fade in box-shadow via jQuery addClass()
body: <p><strong>UPDATED</strong></p>
  
  <p>I have a div, .shadow-circle-lg:</p>
  
  <pre><code>&lt;div class="shadow-circle-lg"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I want to fade in a different border styling to the div, by adding another class, .circle-highlight:</p>
  
  <pre><code>.circle-highlight{
  box-shadow: 
  0 0 0 1px rgba(0,0,0, 0.1),
  0 0 0 10px rgba(188,190,192, 0.3);
   }
  </code></pre>
  
  <p>Result:</p>
  
  <pre><code>   &lt;div class="shadow-circle-lg circle-highlight"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I want this transition to fadeIn over 400ms.</p>
  
  <p>I am trying solve this via a fadeIn animation with the function below:</p>
  
  <pre><code>$this.siblings('.user_icon').find('.shadow-circle-lg').addClass('circle-highlight').hide().fadeIn(400);
  </code></pre>
  
  <p>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.</p>
  
  <p>Any ideas?</p>