title: fading in fading out images with toggleClass
body: <p>Here's a script that is working as a simple carousel to fade in and fade out a few images when the <code>prev</code> and <code>next</code> buttons are clicked. </p>
  
  <p>I successfully achieved the fading in and fade out by using the jQuery <code>fadeIn()</code> and <code>fadeOut()</code> methods.  </p>
  
  <pre><code>var speed = 100;
  
  $('.prev').click(function(event){
      event.preventDefault(); 
  
      var current = $(this).parent().next('ul.images').children(':visible'),
      lastSib = $(this).parent().next('ul.images').children(':last'),
      prevSib = current.prev();
  
      prevSib = prevSib.index() == -1 ? lastSib : prevSib; 
  
      current.fadeOut(speed,function(){
          prevSib.fadeIn(speed);
      });
  
  });
  </code></pre>
  
  <p>I decided to try another solution to fading each image by using css for fading effects by toggling classes with the <code>toggleClass()</code> method. Here is where my problem occurs...<strong>The only</strong> image that fades now is the first image. I don't have access to any other images anymore.</p>
  
  <p>I'm speculating that I might need to loop through each image and approach this solution a little differently. </p>
  
  <p>Here's a link the <a href="http://codepen.io/kapena/pen/zroMmP" rel="nofollow">codepen</a></p>
  
  <pre><code>$(document).ready(function(){
  
      var speed = 100;
  
      $('.prev').click(function(event){
          event.preventDefault(); 
  
          var current = $(this).parent().next('ul.images').children(':visible'),
          lastSib = $(this).parent().next('ul.images').children(':last'),
          prevSib = current.prev();
          prevSib = prevSib.index() == -1 ? lastSib : prevSib; 
  
       // fading out fading in  
          current.toggleClass('out');
          prevSib.toggleClass('in');
      });
  
  $('.next').click(function(event){
      event.preventDefault();
  
      var current = $(this).parent().next('ul.images').children(':visible'),
      firstSib = $(this).parent().next('ul.images').children(':first'),
      nextSib = current.next();
  
      nextSib = nextSib.index() == -1 ? firstSib : nextSib; 
  
          current.toggleClass('out');
          nextSib.toggleClass('in');
  });
  
  $('.images li').click(function(event){
      event.preventDefault();
  
      var firstImg = $(this).parent().children(':first'),
              nextImg = $(this).next();
  
      nextImg = nextImg.index() == -1 ? firstImg : nextImg;
  
      $(this).toggleClass('out');
      nextImg.toggleClass('in');
  
      });
  });
  </code></pre>