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

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

只要您知道图像的原始大小，此代码即可完美运行。 作为一个具有抽象意识的人，我开始尝试使其尽可能地具有动态性。 我发现在HTML5中，图像具有naturalWidth和naturalHeight属性。 所以我将其放入代码中：

$('.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()运行时它们是未定义的（我也尝试将它们当作访问器方法使用，例如$(this).naturalHeight() ，但控制台报告TypeError: $(...).naturalWidth is not a function ）。

我可以轻松地获得页面上所有图像尺寸的列表，但是我对如何识别页面上的图像不知所措。 也许在收集尺寸时，我可以分配数字ID？

那么，问题来了：如何以一种易于扩展的方式在图像的原始尺寸和图像尺寸的一半之间切换动画？

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

另一个注意事项：我已经看到很多答案都说要使用$(...).toggle()事件， 但是JQuery API文档说这已经过时了 ，我们应该使用$(...).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

您可以尝试这样的事情： 小提琴

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

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