jQuery itunes image slider
<p>I'm working on my final project for my Web Design 2 course and I wanted to dress up my site a bit with jQuery.  Have you ever noticed in itunes or on the iOS that when you view your music  by albums, it shows the the covers in a image slider that looks really nice.  I want to do something similar to this minus the flip the covers do.  Here is my code so far:</p>

<pre><code>$(document).ready(function(){
$('.secondImage').animate({ width: '155px', height: '155px' }, 0);
$('.thirdImage').animate({ width: '155px', height: '155px' }, 0);
$('.fourthImage').animate({ width: '155px', height: '155px' }, 0);
$(".item").hide(0).delay(2000).fadeIn(800);   // hides the columns div to ensure images are loaded
$("#loading").hide(0).fadeIn(500).delay(1000).fadeOut(500);   // hides the loading icon

$("#firstColumn").hover(function(){     
    $('.secondImage').animate({ width: '155px', height: '155px' }, 0);
    $('.thirdImage').animate({ width: '155px', height: '155px' }, 0);
    $('.fourthImage').animate({ width: '155px', height: '155px' }, 0);
    $('.firstImage').stop().animate({ width: '315px', height: "315px" }, 500);
});

$("#secondColumn").hover(function(){ 
    $('.firstImage').animate({ width: '155px', height: '155px' }, 0);
    $('.thirdImage').animate({ width: '155px', height: '155px' }, 0);
    $('.fourthImage').animate({ width: '155px', height: '155px' }, 0);
    $('.secondImage').stop().animate({ width: '315px', height: "315px" }, 500);
});

$("#thirdColumn").hover(function(){   
    $('.firstImage').animate({ width: '155px', height: '155px' }, 0);
    $('.secondImage').animate({ width: '155px', height: '155px' }, 0);
    $('.fourthImage').animate({ width: '155px', height: '155px' }, 0);
    $('.thirdImage').stop().animate({ width: '315px', height: "315px" }, 500);
});

$("#fourthColumn").hover(function(){  // when second div is hovered, set opacity of others to 0.5
    $('.firstImage').animate({ width: '155px', height: '155px' }, 0);
    $('.secondImage').animate({ width: '155px', height: '155px' }, 0);
    $('.thirdImage').animate({ width: '155px', height: '155px' }, 0);
    $('.fourthImage').stop().animate({ width: '315px', height: "315px" }, 500);
});
});
</code></pre>

<p>When the page loads, the main content area is hidden while a fake loading screen appears.  This was done simply because I thought it looks cool :).  The images re-size and become bigger like I want them to.  The problem is, if you go too fast then all the images re-size at the same time.  I thought that the .stop() function was supposed to cancel that but maybe I am doing something incorrectly.  Is there an easier way to do the .animate()?  I am open to any and all suggestions.  Tutorials or links to examples are appreciated as well.</p>

<p>Thank you all in advance!
- Mike</p>
