problem with image zoomin/zoomout effect in jquery

i have application in which image gets zoomin and zoomout on focus and blur. now the problem is say i have focus in first cell of 开发者_高级运维row(row consists of 4 cells) and move focus to last cell of row(using arrow key) 2 cells in between first and last cell gets smaller. if i do same after few iterations 2 images between first and last cell disappears.

since in my application each image has diffrernt size i cant directly pass value.

is that possible to read each image size and pass variable containing image size to blur function instead of doing ++15px/-=15px.

code snippet/demo will be very helpfull.

here is my demo. have look please help.demo

You could e.g. use jQuery's data() method to store the original size of the image and use it in your focus and blur event handlers. Like this:

// cache size
$('button img').each(function(i, img) {
    $(img).data('size', {
        'width': $(img).width(),
        'height': $(img).height(),
    });
});

// on focus
$('button:has(img)').focus(function() {
    var $image = $(this).find('img'),
        size = $image.data('size');
    $image.stop().animate({
        'width': (size.width + 15) +'px',
        'height': (size.height + 15) +'px',
    }, 500);
});

// on blur
$('button:has(img)').blur(function() {
    var $image = $(this).find('img'),
        size = $image.data('size'); 
    $image.stop().animate({
        'width': size.width +'px',
        'height': size.height +'px',
    }, 1);
});

Here's your demo edited, I guess it should work like this, right? I've removed the timeouts and used stop() instead, given that that's what you wanted to achieve with the timeouts?