Question

I have 9 images arranged in 3 rows. Each row has 3 images. All the images are of different size. On hover I am increasing the image width and height to 400px and 300px respectively and on mouseout I am restoring back to their original size. Now the problem is when I hover randomly, images popup but some doesn’t get back to their original size. How do I fix this? Please help.

My code:

jQuery(document).ready(function() {  
        jQuery('my-selector').hover(function() { 
var someVariable = jQuery( 'my-selector img', this );
someVariable.attr('actualWidth', someVariable.width()); 
someVariable.attr('actualHeight', someVariable.height());
jQuery('my-selector').stop()
              .animate({
                width: "400px",             
                height: "300px"
            }, 200, function() {
                // Animation complete.
                jQuery('show-some-div').show();
            });
        },  
 function() {  
jQuery('my-selector').stop()
              .animate({
                width: someVariable.attr('actualWidth'),                
                height: someVariable.attr('actualHeight')}, 200, function() {
                // Animation complete.
                jQuery('show-some-div').hide();
            });

Answer 1

There are actually three potential problems here that I spot.

The first is that you’re sort of vaguely reselecting your elements when an event fires. This means that even though only one of your images is firing, you’re doing various things to all of them, or else having to do some gymnastics in order to get back to what the user actually interacted with.

What can help you with this problem is the fact that within a jQuery event callback, the contextual reference variable this will point at the html element that the event refers to. This means that instead of doing

var someVariable = jQuery('my-selector img', this);

you can do

var someVariable = jQuery(this);

and it’ll be a jQuery object that points at the html element that fired the event. I like to keep to a convention where jQuery objects start with a $, so I usually do something like

var $this = $(this);

Regardless, now that you definitely have a reference to the element that actually caused the mouseover or mouseout event, you can use it to do your actions (I’ll stick with someVariable for now):

someVariable.stop().animate({ ... });

The second problem is that you’re kind of mucking with the DOM when you start attring random attributes onto HTML elements. actualWidth isn’t a real HTML attribute, and some browsers will take more kindly to that fact than others. Thankfully, jQuery provides a way to store off variables that are related to some particular HTML element. Simply use .data rather than .attr exactly the way you’re already using .attr, and it’ll store away the data you want:

someVariable.data('actualWidth', someVariable.width()); // sets actualWidth
// ... some time later ....
var someOtherVariable = someVariable.data('actualWidth'); // gets actualWidth

The third problem I see here is: what happens if someone mouses out of your element, but before it’s returned to its natural size, they mouse back on? Now you’re measuring the image before it’s shrunk back down to its actualSize, and calling that its actualSize. To solve this, simply measure their actualSizes as each one loads (you don’t want to do page load because the images might not yet be loaded, you want to do the load event for each image, and each image will fire its load event when it is loaded and sized):

jQuery('my-selector img').load(function()
{
    var someVariable = jQuery(this);
    someVariable.data('actualWidth', someVariable.width());
    someVariable.data('actualHeight', someVariable.height());
});

Now that you’ve measured each image and stored off what is truly its proper size, you don’t have to do the work each time on mouseover; simply expand the image to 400×300 on mouseover without caring, and then back to the stored off actualWidth and actualHeight when they mouseout.

Between those three issues, your problem should be nailed.