0

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

(a) 但我需要动画到半维，所以有什么选择*=0.5吗？

后来，在动画之后，点击重置按钮，我需要重置尺寸。所以我将基本宽度和高度存储在数据属性中。但又$(this)不能在里面工作.animate()

(b) 请检查jsFiddle，它不起作用。有什么解决方法吗？

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

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

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

4

2 回答 2

1

您可以使用步进功能：JSFiddle 示例

但是，我认为以这种方式做事并没有真正的好处。

我对您的代码所做的更改：

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
    });
});
于 2013-08-09T10:23:49.783 回答
0

我认为没有 .each() 就无法做到。如果您担心延迟，您可以让动画运行而无需经过队列。而且，我会根据您希望动画如何响应同时点击来为您的重置功能（和/或反之亦然）添加一个 stop(true, false)。

于 2013-08-09T10:01:17.607 回答