title: JQuery Custom LightBox - Opacity Fade
body: <p>I am building my own jQuery light box but am running into a small issue. The html page has 6 images on it and when one is clicked an overlay is displayed over the whole page with the image in the center. </p>
  
  <p>The issue I am running into is that the animation that controls the light box displaying is not smooth, it produces a sort of outwards in effect and I would like it to all be effected as one. The animation to fade it out works perfectly though, so I am not sure what I am missing ?</p>
  
  <p>Here is a jsFiddle: <a href="http://jsfiddle.net/hqsapk5a/" rel="nofollow">http://jsfiddle.net/hqsapk5a/</a></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="page-wrapper"&gt;
  
      &lt;div class="grid"&gt;
  
          &lt;div class="image-thumb-wrapper"&gt;
              &lt;img src="img/Casinogames_2MillionBC.jpg" class="image-thumb" /&gt;
          &lt;/div&gt;
  
          &lt;div class="image-thumb-wrapper"&gt;
              &lt;img src="img/casinogames_7thheaven.jpg" class="image-thumb" /&gt;
          &lt;/div&gt;
  
          &lt;div class="image-thumb-wrapper"&gt;
              &lt;img src="img/casinogames_10sOrBetter.jpg" class="image-thumb" /&gt;
          &lt;/div&gt;
  
          &lt;div class="image-thumb-wrapper"&gt;
              &lt;img src="img/casinogames_21BurnBlackjack.jpg" class="image-thumb" /&gt;
          &lt;/div&gt;
  
          &lt;div class="image-thumb-wrapper"&gt;
              &lt;img src="img/Casinogames_AfterNightFalls.jpg" class="image-thumb" /&gt;
          &lt;/div&gt;
  
          &lt;div class="image-thumb-wrapper"&gt;
              &lt;img src="img/casinoGames_AllAmerican.jpg" class="image-thumb" /&gt;
          &lt;/div&gt;                      
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div class="light-box"&gt;
  
      &lt;div class="light-box-overlay"&gt;
  
      &lt;/div&gt;
      &lt;div class="light-box-wrapper"&gt;
          &lt;img src="" id="light-box-image" /&gt;
      &lt;/div&gt;
      &lt;a href="" class="light-box-close"&gt;x&lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>My jQuery:</p>
  
  <pre><code>    $(document).ready( function() {
  
          $('.image-thumb').click( function() {
              var image = $(this).attr('src');
              $('#light-box-image').attr('src', image);
              $('.light-box').css('opacity', '0').fadeTo(100, 1, function() {
                  $('.light-box').css('z-index', '2');
              });
          });
  
      $('.light-box-close').click( function(e) {
          event.preventDefault(e);
          $('.light-box').css('opacity', '1').fadeTo(100, 0, function() {
              $('.light-box').css('z-index', '0');
          }); }); 
  });
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.page-wrapper {
          height: 100%;
          position: absolute;
          width: 100%;
          z-index: 1;
      }
      .grid {
          width: 600px;
          height: 552px;
          position: absolute;
          bottom: 0;
          left: 0;
          top: 0;
          right: 0;
          text-align: center;
          margin: auto;
          background-color: #DFDFDF;
          border: 2px solid #999;
          border-radius: 5px;
          padding: 20px 0px;
      }
      .image-thumb-wrapper {
          width: 228px;
          display: inline-block;
          margin: 5px;
      }
      .image-thumb:hover {
          cursor: pointer;
      }
      .light-box {
          position: fixed;
          height: 100%;
          width: 100%;
          top: 0;
          left: 0;
          z-index: 0;
      }
      .light-box-overlay {
          position: absolute;
          top: 0;
          left: 0;
          background-color: #000;
          height: 100%;
          width: 100%;
          opacity: 0.8;
      }
      img#light-box-image {
          z-index: 10;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          border: 2px solid #fff;
          background-color: #999;
          padding: 25px;
          border-radius: 5px;
      }
      .light-box {
          opacity: 0;
      }
      a.light-box-close {
          color: #fff;
          font-size: 1.2em;
          position: absolute;
          text-decoration: none;
          right: 10px;
          top: 5px;
      }
      a.light-box-close:hover {
          text-decoration: underline;
      }
  </code></pre>