jquery中的图像大小调整

我有一个应用程序，分别在“聚焦”和“模糊”事件上进行图像缩放/缩放。我用这个函数来做这个

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

$（文档）.ready（函数（）{
无功定时器；
var w=“img.width”；
var h=“模拟高度”；
$（'button:has（img）'）。焦点（函数（）{
var$image=$（this.find（'img'）；
计时器=设置超时（函数（）{
$image.animate({
“宽度”：“+=15px”，
“高度”：“+=15px”
}, 500);  
}, 
1000);
});
$（'button:has（img）'）。模糊（函数（）{
如果（计时器！==null）清除超时（计时器）；
$（this.find（'img'）。设置动画({
“宽度”：“-=15px”，
“高度”：“-=15px”
}, 0);
});

现在我的问题是，有没有其他方法可以读取图像大小并将15px添加到图像宽度和高度，然后传递这些值，而不是这样做：

`'宽度'：“+=15px”和高度'：“+=15px”将此值传递给焦点（），'宽度'：“-=15px”和高度'：“-=15px传递给模糊（）

我试着做了以下改变，但没有成功

var w=“image.width”； var h=“image.height”； 风险值更新w=w+10； var更新h=h+10

---

将w，h传递给blur（）并将updated，w，updated，h传递给focus（）。这将不起作用。

您可以尝试此操作，但会失去缩放效果

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

---

您有语法错误，我尝试了一下，效果很好：

您将错过以下内容：

});

最终代码如下：

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

$（文档）.ready（函数（）{
无功定时器；
var w=“img.width”；
var h=“模拟高度”；
$（'button:has（img）'）。焦点（函数（）{
var$image=$（this.find（'img'）；
计时器=设置超时（函数（）{
$image.animate({
“宽度”：“+=15px”，
“高度”：“+=15px”
}, 500);
},
1000);
});
$（'button:has（img）'）。模糊（函数（）{
如果（计时器！==null）清除超时（计时器）；
$（this.find（'img'）。设置动画({
“宽度”：“-=15px”，
“高度”：“-=15px”
}, 0);
});
});

---

我从评论中了解到。你的电话打得太频繁了，你需要保留一些原始信息。首先初始化图像，然后：

$(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事件再次将此作为窗口。所以我们需要对焦点做一些事情，因为上面的代码在没有超时的情况下运行良好

新更新

我将相同的功能添加到模糊中。 执行此操作时，您的代码工作正常，但实际上您必须检查您的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);
});

---

我猜模糊部分不起作用了？或者有什么问题？你可以问

$（'img'）.height（）或者这不是你所指的吗？@marnix我确实使用你说的函数wat获得图像高度和宽度，现在我的问题是如何向它添加一些值，比如x，然后将该值写回image.width/image.height以更新其值。代码sinpate将非常有用。我希望zoomin/zoomout都能工作，因为这是我的应用程序非常需要的。希望您能帮助我解决这个问题。@marnix您能给我一些建议吗。我是stuck@rashmi：轻松，我正在努力。我可以告诉你的是，由于setTimeout函数，你失去了
这个
焦点。
此
可能又是窗口。没有超时，一切正常。@marnix，很抱歉打扰你。有没有别的办法。我无法从我的应用程序中删除计时器，因为它是我应用程序的重要部分（@rashmi，timer很好用，但是你必须把你的元素作为一个参数。jsFiddle现在讨厌我，所以我停止了它，但是你想要的是非常有可能的。有关更多提示，请参阅编辑后的答案。