Question

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:

$(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);
});
});

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.

Thank you all in advance!
– Mike

Answer 1

Here is a basic example, take a look:

demo jsBin

var imgWmarg = 159; // image with margins (px)
var imgW = 155;
var increaseWidth = 80; // px (both sides)

$('.item img').each(function(i,e){
  
  $(this).css({position:'absolute', left: '+='+(imgWmarg*i) });
  
  $(this).hover(function(){    
        $(this).css({zIndex:1}).stop(1).animate({ top:-(increaseWidth/2), left:((imgWmarg*i)-(increaseWidth/2)), width:(imgW+increaseWidth) },300);    
  }, function(){    
        $(this).stop(1).animate({ top:0, left:(imgWmarg*i), width:imgW }, 100, function(){
                $(this).css({zIndex:0});     // at the end of animation
        });
  });
  
}); 

What have I done:

• As the images are set position:relative, we have to set them with jQuery to absolute and dynamically reset their ‘normal’ positions by knowing the width with margins and their respective index N inside the parent element
• The i in .each(function(i,e){ returns the index of each element to animate
• Multiplying that i (0,1,2,3) by the imgWmarg we have their positions.
• Than we undo – redo that positions on hover.