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?