JQuery Animation

I am playing around with Jquery .animate, and trying to do some basic image animations where I expand an image on mouse over. However, I have 4 images, and currently whenever one is expanded it effects the other images. How do I make them independent of each other?

  <div class="logos"> 
     <img align="top" id="imgBuffalo" src="../../../../Content/Images/buffalo.png" width="80" height="60" />&nbsp;&nbsp; 
     <img align="top" id="imgIndianapolis" src="../../../../Content/Images/indianapolis.png" width="80" height="60" />&nbsp;&nbsp; 
     <img align="top" id开发者_运维知识库="imgMiami" src="../../../../Content/Images/miami.png" width="80" height="60" />&nbsp;&nbsp; 
     <img align="top"  id="imgNYJets" src="../../../../Content/Images/nyjets.png" width="80" height="60" /> 
  </div> 


 $(document).ready(function () { 

        $("#imgBuffalo").mouseover(function () { 
            $("#imgBuffalo").animate({ width: "90px", height: "70px" }, 500); 
        }); 

        $("#imgBuffalo").mouseleave(function () { 
            $("#imgBuffalo").animate({ width: "80px", height: "60px" }, 500); 
        }); 

        $("#imgIndianapolis").mouseover(function () { 
            $("#imgIndianapolis").animate({ width: "90px", height: "70px" }, 500); 
        }); 

        $("#imgIndianapolis").mouseleave(function () { 
            $("#imgIndianapolis").animate({ width: "80px", height: "60px" }, 500); 
        }); 

        $("#imgMiami").mouseover(function () { 
            $("#imgMiami").animate({ width: "90px", height: "70px" }, 500); 
        }); 

        $("#imgMiami").mouseleave(function () { 
            $("#imgMiami").animate({ width: "80px", height: "60px" }, 500); 
        }); 

        $("#imgNYJets").mouseover(function () { 
            $("#imgNYJets").animate({ width: "90px", height: "70px" }, 500); 
        }); 

        $("#imgNYJets").mouseleave(function () { 
            $("#imgNYJets").animate({ width: "80px", height: "60px" }, 500); 
        });

Using the animate method effectively alters the CSS on the elements it acts on. Since your images are simply inline with each other, changing the dimensions of one, will necessarily effect the others.

You could try playing with position: relative or position: absolute so that the images won't move when their dimensions change, however you're going to have inconsistent results across browsers.

If you're looking for a pop-up expansion type effect, I'd suggest creating a new div and then clone the image into that. You can then do whatever you'd like to the floating div/image without having an affect on the others.

Based on the animations you're currently using, it looks like you're trying to achieve something similar to the Apple dock animations. There are a number of jquery plugins available already that you might use instead of hand coding the animations directly.

You mean it moves the other images as the one image is expanding? If you don't want them affecting eachother you will have to put each image into an absolute div and change the z-index of the div containing the active animation to be on top.

Your best bet is to position your logos absolutely on the screen. This will keep them from conflicting with each other. Give each img a "logo" class or something like that.

.logo { position : 'absolute'; }

Then position each logo based on its ID.

Next, I'd suggest using .hover() instead of the mouseover and mouseleave. This gives you the ability to set two event handlers in less code.

$('.logo').hover(function() {
     $(this).animate({ width: "90px", height: "70px", top : "5 less px than set in css", left : "5 less than set in css" }, 500); 
}, function() {
     $(this).animate({ width: "80px", height: "60px", top : "Reset to css", left : "reset to css" }, 500); 
}

Read up on http://api.jquery.com/hover/ for more details.

You're on the right path to learning some cool effects in jQuery. Keep it up!