title: How can I use JQuery slideDown to smoothly bring an image down?
body: <p>I am using the following code: </p>
  
  <pre><code>$(document).ready(function() {
      $('.some_class').slideDown(1000);
  });
  </code></pre>
  
  <p>The code above works but the slideDown is sort of rough and jagged.  It's not smooth.  You can tell it's stuck for a few milliseconds.  </p>
  
  <p>What can I do for an easier slideDown effect?</p>
  
  <p>I have a full page background image.  I am testing in firefox and chrome. </p>
  
  <p>THe background image is loaded as part of a div in the body.  The div is the first thing after the body tag: </p>
  
  <pre><code>&lt;div style="background-image:url('images/background.jpg');z-index:-2;position:fixed;height:100%;width:100%;display:none;" class="bg_load" id="bg"&gt;&lt;/div&gt;
  
  
  .bg_load:before {
      bottom: 0;
      content: "";
      left: 0;
      opacity: 0.6;
      position: fixed;
      right: 0;
      top: 0;
  }
  .bg_load:after {
      border-radius: 50% 50% 50% 50%;
      box-shadow: 0 0 300px 300px rgba(0, 0, 0, 0.2);
      content: "";
      height: 2px;
      left: 50%;
      margin: 200px 0 0 -1px;
      opacity: 1;
      position: fixed;
      top: 25%;
      transition: opacity 0.15s linear 0s;
      width: 2px;
  }
  .bg_load {
      background-position: 50% 50%;
      background-size: cover;
      bottom: 0;
      left: 0;
      position: fixed;
      right: 0;
      top: 0;
      z-index: 100;
  }
  </code></pre>