problem with .blur function using jquery

Question

I have an application which zooms in image on focus() and zooms out on blur(). I have read the original image size and added 15px to it in order to create the zoom in effect, which works fine. The problem is with the zoom out effect where I'm trying to pass the original image size that I have read to .blur() but with no luck. Could any one help me solve this issue?

Answer 1

Here is a working demo of the following code.

First, you weren't calling the $.data() method on orgW and orgH in your .blur() function. Also, I've altered your .blur() function to have a similar implementation to your .focus() function in order to get the zoom out to work:

$('button:has(img)').blur(function() {

    if (timer !== null) clearTimeout(timer);

    var $image = $(this).find('img');

    $image.each(function() {
        $(this).animate({
            'width': $.data(this, 'orgW') + 'px',
            'height': $.data(this, 'orgH') + 'px',
        }, 500);
    });

});

Answer 2

You can also use '+=15' and '-=15' in the animation function. No need to store width and height.

$('button:has(img)').focus(function() {
    $(this).find('img').animate({
        width: '+=15',
        height: '+=15'
    }, 500);
});

$('button:has(img)').blur(function() {
    $(this).find('img').animate({
        'width': '-=15',
        'height': '-=15'
    }, 0);
});

Demo

EDIT: Now it should work.