Изменение размера изображения в jQuery

Question

У меня есть приложение, когда изображение масштабируется/масштабируется на событиях «фокус» и «размытие» соответственно. Я использовал эту функцию для этого

<script> 

$(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> 

теперь мой вопрос есть ли другой способ, в котором я могу читать размер изображения и добавлять 15px по ширине и высоте изображения и передать эти значения а не делать этого:

`` width ': "+ = 15px" и height': "+ = 15px передать эти значения в focus() и 'width':" - = 15px "и height ':" - = 15px to blur().

я попытался сделать следующие изменения, но не работало

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

Передача w, h для размытия() и update_w, updated_h для фокусировки(). Это не будет работать.

Answer 1

Итак, как Я понимаю из комментариев. Ваш вызов выполняется слишком часто, и вам нужно сохранить оригинал. Сначала инициализировать изображения затем:

$(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 
      }); 
     }); 
    }); 
}); 

НАМЕКИ

Событие SetTimeout имеет this как окно снова. Поэтому нам нужно сделать что-то с фокусом, потому что вышеприведенный код работает нормально без тайм-аутов.

NEW UPDATE

я поставил такую ​​же функциональность для размытия. Ваш код работает нормально, когда вы это делаете, но вы действительно должны проверить ваш keyInput код, потому что он немного глючит. firebug даже дает ошибки, потому что у вас еще нет случая для TAB.

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); 
}); 

Answer 2

Вы можете попробовать это, но вы потеряете эффект масштабирования.

$('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"); 
}); 

Answer 3

У вас есть ошибка синтаксиса, я стараюсь это и отлично работает для меня:

вы пропускаете ниже: });

окончательный код здесь:

 

<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>