在两个未知值之间切换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)
        });        
    });
});