Question

I have a mouseover effect that enhances an image, and scales the image back to its original size on mouseout.

$("div.elby_product_thumb img").mouseover(function() {
    var originalHeight = $(this).width();
    var originalWidth = $(this).height();

    $(this).css('border','2px solid #f2f2f2');
    $(this).css('z-index','500');
    $(this).stop().animate({
        "top": "-50px",
        "left": "-50px",
        "width": "200px",
        "height": "200px"
    }, 200);
}).mouseout(function(){
    $(this).css('border','none');
    $(this).css('z-index','1');
    $(this).stop().animate({
        "top": "0px",
        "left": "0px",
        "width": originalWidth + "px",
        "height": originalHeight + "px"
    }, 200);
});

Although this results in Uncaught ReferenceError: originalWidth is not defined because originalWidth/Height is not in the scope of the mouseout handler function.

Any ideas?

Answer 1

Declare variables out side of mouseover and mouseout to make it global and assign values within mouseover

var originalHeight;
var originalWidth;   

$("div.elby_product_thumb img").mouseover(function(){
      originalHeight = $(this).width();
      originalWidth = $(this).height();
     $(this).css('border','2px solid #f2f2f2');
        $(this).css('z-index','500');
        $(this).stop().animate({
            "top": "-50px",
            "left": "-50px",
            "width": "200px",
            "height": "200px"
            }, 200);
}).mouseout(function(){
        $(this).css('border','none');
        $(this).css('z-index','1');
        $(this).stop().animate({
            "top": "0px",
            "left": "0px",
            "width": originalWidth + "px",
            "height": originalHeight + "px"
        }, 200);
});

Edit: If you do not need to declare the variables in window scope to make them full global you can make enclosure for both events as @roasted suggested.

(function(){
   var originalHeight;
   var originalWidth;   

   $("div.elby_product_thumb img").mouseover(function(){
    //your code
   }).mouseout(function(){
    //your code
   });
})();