image resize in jquery

i have an application when image zoomin/zoomout on "focus" and "blur" events respectively. i have used this function for that

<script>

$(document).ready(functi开发者_StackOverflowon () {


  var timer;
  var w="img.width";
  var h="img.height";
      $('button:has(img)').focus(function () {
         var $image = $(this).find('img');

         timer = setTimeout(function() {

                $image.animate({
                    'width': "+=15px",
                    'height': "+=15px"
                }, 500);  
              }, 
              1000);

      });

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

        if (timer !== null) clearTimeout(timer);
        $(this).find('img').animate({
                'width': "-=15px",
                'height': "-=15px"
            }, 0);
      });

</script>

now my question is there any other way in which i can read image size and add 15px to image width and height and pass those value instead of doing this:

`'width': "+=15px" and height': "+=15px pass this values to focus() and 'width': "-=15px" and height': "-=15px to blur().

i tried doing following changes but didnt work

var w= "image.width"; var h = "image.height"; var updated_w = w+10; var updated_h= h+10;

passing w,h to blur() and updated_w, updated_h to focus(). this will not work.

So as I understand from comments. Your call is made too often and you need some original to keep. First initialize the images then:

$(document.ready(function()
{
    $('button img').each(function()
    {
        // save the data inside the element with jQuery
        $.data(this, 'orgH', $(this).height());
        $.data(this, 'orgW', $(this).width());
    });

    // i omitted the timeout, but do as you wish
    // just an example of $.data
    $('button:has(img)').focus(function()
    {
        $('img',this).each(function()
        {
            $(this).animate({
            width: $.data(this,'orgW') + 15 + 'px' // where THIS is the image element again
            });
        });
    });
});

HINTS

The setTimeout event has this as window again. So we need to do something with the focus, because the above code is working fine without timeouts.

NEW UPDATE

I put the same functionality to the blur. Your code is working fine when you do this, but you really have to check your keyInput code, because it is a bit buggy. firebug even gives errors, because you don't have a case for TAB yet.

var timerFocus;
var timerBlur;
$('button:has(img)').focus(function()
{
    if(timerBlur !== null) clearTimeout(timerBlur);
    timerFocus = setTimeout(function(el)
    {
        $('img',el).each(function()
        {
            $(this).animate({
            width: $.data(this,'orgW') + 15 + 'px', // where THIS is the image element again
            height : $.data(this,'orgH') + 15 + 'px'
            });
        });
    },500,this); // THIS is the button element
});

$('button:has(img)').blur(function ()
{
    if (timerFocus !== null) clearTimeout(timerFocus);
    timerBlur = setTimeout(function(el)
    {
        $('img',el).each(function()
        {
            $(this).animate({
                width: $.data(this,'orgW')-15+'px', // WATCH THIS COMMA!
                height: $.data(this,'orgH')-15+'px'
            });
        });
    },500,this);
});

You can try this, but you will loose the zooming effect.

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

        if (timer !== null) clearTimeout(timer);
        var image = $(this).find('img');
        var new_width = image.width() - 15;
        var new_height = image.height() - 15;
        image.css('width', new_width+"px");
        image.css('height', new_height+"px");
});

You have syntax error, I try it and work fine for me:

you miss below: });

final code is here:

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var timer;
        var w="img.width";
        var h="img.height";
        $('button:has(img)').focus(function () {
            var $image = $(this).find('img');

            timer = setTimeout(function() {

                $image.animate({
                    'width': "+=15px",
                    'height': "+=15px"
                }, 500);
            },
            1000);

        });

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

            if (timer !== null) clearTimeout(timer);
            $(this).find('img').animate({
                'width': "-=15px",
                'height': "-=15px"
            }, 0);
        });
    });
</script>