title: jquery image fade in
body: <p>I have a working jquery image carousel that I was building. It's mostly finished (just the increase button works): <a href="http://jsfiddle.net/2C8fy/7/" rel="nofollow">http://jsfiddle.net/2C8fy/7/</a></p>
  
  <p>The only problem I'm facing is that when the image get appended it does not fade in. It just appears. I tried adding another slot on the right that was 0 opacity and then animating it to fade in but that didn't seem to work either. How can I animate that right slot image to make it appear like it is fading in? Here's what I have right now:</p>
  
  <pre><code>$('#basic_div').animate({          //slides the div with the images in it to the left.
              left: '-=40px'
          }, 300, function() {
  
          });
  
          left.animate({             //fade out effect for the left most image
              opacity: 0
          }, 300, function() {
              left.remove();         //gets rid of left most image after it becomes invisible.
              $('#basic_div').css({
                  left: '0px'        //resets the div that contains the images
              });
          });
  
  
              middle.attr('id', 'left_slot');       //changes ids
              right.attr('id', 'middle_slot');
  
  
              $("#basic_div").append(newImgSL);
              newImgSL.attr('id', 'right_slot');
              newImgSL.animate({
                  opacity: 100   //I thought this would make it fade in, but it still just appears.
              }, 300);
  </code></pre>