Question

我的图片以原始尺寸的一半开始在页面上开始。单击图像时，它应扩展为此原始大小。再次点击时，它会回到它的一半大小。

我发现这个JQuery代码可以在两组大小之间切换元素的大小：

$('.expandable').click(function() {
    var size = [];
    $(this).width() >= 896 ? size = [448, 221] : size = [896, 211];
    $(this).stop().animate({width: size[0], height: size[1]}, 'slow');
});

此代码完美无缺 - 只要您知道图像的原始大小即可。作为一个具有抽象意识的人，我开始尝试让它尽可能地充满活力。我发现，in HTML5, there are naturalWidth and naturalHeight attributes for images.所以我把它放到代码中：

$('.expandable').click(function() {
    var size = [];
    $(this).width() >= $(this).naturalWidth ? size = [$(this).naturalWidth / 2, $(this).naturalHeight / 2] : size = [$(this).naturalWidth, $(this).naturalHeight];
    $(this).stop().animate({width: size[0], height: size[1]}, 'slow');
});

当然，$(this).naturalHeight和$(this).naturalWidth都显示在console.log()运行时它们未定义（我也尝试使用它们，就像它们是访问方法一样，例如{{1}但是，控制台报告了$(this).naturalHeight()）。

我可以很容易地获得页面上所有尺寸图像的列表，但我不知道如何识别哪个图像在页面上。也许当我收集尺寸时，我可以分配数字ID吗？

所以，问题是：如何以一种易于扩展的方式在图像的原始大小和图像大小的一半之间切换动画？

注意：测试是在最新版本的firefox上运行的。

另一个注意事项：我见过的许多答案都说要使用TypeError: $(...).naturalWidth is not a function事件but the JQuery API documentation says that this is deprecated，而我们应该使用$(...).toggle()函数来切换可见性只是一个元素，因此是不充分的。

Answer 1

qtgye的代码几乎是正确的，但它导致图像以其全尺寸开始，而不是半尺寸。考虑到这一点，我的一位同事指出我可以反过来做同样的事情：

$('.expandable').each(function() {
    var w = $(this).width();
    var h = $(this).height();
    $(this).click(function() {
        $(this).animate({
            width: ($(this).width() == w ? w * 2 : w),
            height: ($(this).height() == h ? h * 2 : h)
        });
    });
});

请注意，我现在将它乘以2，而不是将大小除以2。另请注意，width和height是$(...).animate()中的变量，而不是字符串。

Answer 2

你可以试试这样的东西： fiddle

$('.expandable').each(function(){
    var s = $(this).width();

    $(this).click(function(){
        $(this).animate({
            'width' : ($(this).width()==s?s/2:s)
        });        
    });
});

在两个未知值之间切换JQuery动画

2 个答案: