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

Toggling a JQuery animation between two unknown values

本文关键字：之间 JQuery 动画 未知 两个      更新时间：2023-09-26

我有一个图像，它以原始大小的一半开始在页面上。单击图像时，它应扩展为此原始大小。再次单击时，它会恢复到一半大小。

我发现这个 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() 函数，它只切换元素的可见性，因此是不够的。

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() 中的变量，而不是字符串。

你可以试试这样的东西：小提琴

$('.expandable').each(function(){
    var s = $(this).width();
    $(this).click(function(){
        $(this).animate({
            'width' : ($(this).width()==s?s/2:s)
        });        
    });
});
相关文章：