Question

我有一个html，其中包含许多具有不同尺寸的元素，这些元素绝对定位。我想为它们设置动画，并相对于当前的宽度和高度更改宽度和高度，就像设置宽度和高度的一半尺寸一样。现在，animate确实有+=和-=用于相对增量或减量。

（a）但我需要设置半维动画，那么有*=0.5这样的选项吗？

之后，在动画之后，点击重置按钮，我需要重置尺寸。所以我在数据属性中存储了基本宽度和高度。但$(this)

在.animate()

内再次无效.each()

（b）请检查无效的jsFiddle。有没有解决这个问题？

我知道使用.each()可以实现它，但我不想要另一个循环，因为我的标记中有很多元素。

请检查jsFiddle，这是我想要的工作版本，但使用each()。正如我上面所说，我不想要另一个循环，因为html包含很多这些元素。

（c）无论如何这可以在不使用{{1}}的情况下实现，并且我还需要具有重置功能（删除样式属性将不起作用，因为这些元素使用内联样式属性定位）。

Answer 1

您可以使用步骤功能：JSFiddle Example

但是我觉得你从那样做的事情中没有真正的好处。

我所做的代码更改：

shrink_ratio = 0.5;
$('button#trigger').click(function(){
    $('.object').animate({
        end: 1
    }, {
        duration: 500,
        step: function(now, fx) {
            startWidth = $(this).data('width');
            startHeight = $(this).data('height');
            $(this).css({width: startWidth - shrink_ratio * startWidth * now, 
                         height: startHeight - shrink_ratio * startHeight * now});
        },
        queue: false
    });
});

$('button#reset').click(function(){
    $('.object').animate({
        end: 0
    }, {
        duration: 500,
        step: function(now, fx) {
            startWidth = $(this).data('width');
            startHeight = $(this).data('height');
            $(this).css({width: startWidth - shrink_ratio * startWidth * now, 
                         height: startHeight - shrink_ratio * startHeight * now});
        },
        queue: false
    });
});

Answer 2

如果没有.each（），我认为你不能这样做。如果您担心延迟，可以在不通过队列的情况下运行动画。而且，我会为你的重置功能添加一个停止（true，false）（和/或反之亦然），具体取决于你喜欢动画响应同时点击的方式。

将尺寸相乘并重置动作

2 个答案: