使用 jquery 的 .blur 函数出现问题

发布于 2024-10-14 06:58:53 字数 178 浏览 6 评论 0原文

我有一个应用程序，可以在 focus() 上放大图像，在 blur() 上缩小图像。我已经阅读了原始图像尺寸并添加了 15px 以创建放大效果，效果很好。问题在于缩小效果，我试图将已读取的原始图像大小传递给 .blur() 但没有成功。有人可以帮我解决这个问题吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冷情妓 2024-10-21 06:58:53

这是以下代码的工作演示。

首先，您没有在您的 .blur() 函数中调用 orgW 和 orgH 上的 $.data() 方法。另外，我更改了您的 .blur() 函数，使其具有与 .focus() 函数类似的实现，以便缩小工作：

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

    if (timer !== null) clearTimeout(timer);

    var $image = $(this).find('img');

    $image.each(function() {
        $(this).animate({
            'width': $.data(this, 'orgW') + 'px',
            'height': $.data(this, 'orgH') + 'px',
        }, 500);
    });

});

Here is a working demo of the following code.

First, you weren't calling the $.data() method on orgW and orgH in your .blur() function. Also, I've altered your .blur() function to have a similar implementation to your .focus() function in order to get the zoom out to work:

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

    if (timer !== null) clearTimeout(timer);

    var $image = $(this).find('img');

    $image.each(function() {
        $(this).animate({
            'width': $.data(this, 'orgW') + 'px',
            'height': $.data(this, 'orgH') + 'px',
        }, 500);
    });

});

回复收藏 0 原文

不弃不离 2024-10-21 06:58:53

您还可以在动画函数中使用'+=15'和'-=15'。无需存储宽度和高度。

$('button:has(img)').focus(function() {
    $(this).find('img').animate({
        width: '+=15',
        height: '+=15'
    }, 500);
});

$('button:has(img)').blur(function() {
    $(this).find('img').animate({
        'width': '-=15',
        'height': '-=15'
    }, 0);
});

演示

编辑：现在它应该可以工作了。

You can also use '+=15' and '-=15' in the animation function. No need to store width and height.

$('button:has(img)').focus(function() {
    $(this).find('img').animate({
        width: '+=15',
        height: '+=15'
    }, 500);
});

$('button:has(img)').blur(function() {
    $(this).find('img').animate({
        'width': '-=15',
        'height': '-=15'
    }, 0);
});

Demo

EDIT: Now it should work.

回复收藏 0 原文

~没有更多了~