Javascript 使用JQuery'；s animate（）

我想将元素的样式设置为使用CSS定义的值。我不想将动画设置为默认值，因此

animate（{'width'：'auto'}）

不起作用

例如：

<style>
#element{width:100px;}
</style>

<div id=element></div>

<script>
$('#element').width(200);
$('#element').animate({width:'auto'});
</script>

#元素{宽度：100px；}
$（'元素'）。宽度（200）；
$（'#element'）。设置动画（{width:'auto'}）；

---

有没有一种方法可以在不使用Javascript变量的情况下将元素动画设置回其原始宽度？

您可以尝试以下方法之一：

如果

width

和

animate

在同一范围内，可以执行类似操作（在本地变量中设置新宽度之前存储初始宽度，并在

animate

中使用它）：

如果稍后调用

animate

，但由于局部变量超出范围而无法使用，则可以将初始宽度存储在

数据

属性中

var initialWidth = $('#element').width(); // or $('#element').css('width')
$('#element').data('initial-width', initialWidth);
$('#element').width(200);

然后在调用

动画时检索它：

var initialWidth = $('#element').width(); // or $('#element').css('width')
$('#element').width(200);
$('#element').animate({width:initialWidth});

var initialWidth = $('#element').data('initial-width');
$('#element').animate({width: initialWidth});

请参见使用无JS变量的方法2

您可以通过使用辅助html标记来解决“无JS变量”的要求

<style>
$aux_element {width:100px; display: none;}
#element, width:100px;}
</style>

<div id='aux_element'></div>
<div id='element'></div>

<script>
$('#element').width(200);
$('#element').animate({width: $('#aux_element').css('width');});
</script>

$aux_元素{宽度：100px；显示：无；}
#元素，宽度：100px；}
$（'元素'）。宽度（200）；
$（'#element'）.animate（{width:$（'#aux#u element'）.css（'width'）；}）；

---

那么您想从

100px

（原始）设置动画到

200px

，然后再回到

100px

？使用JS变量有什么问题？@stackErr:没错。@j08691:我正在从不同的范围更改宽度，所以如果使用变量，它会变得混乱。我会使用变量作为最后手段。OP特别要求“不使用Javascript变量”看看我的第二种方法，没有使用变量。虽然我理解你的意思，但我认为这太复杂了。如果我使用这种方法，我只需要更改html，做一些类似的事情，然后像您一样使用jQuery将其提取出来。如果您这样做，其他人会做不同的事情，而问题是“我想将元素的样式设置为使用CSS定义的值。我不想设置为默认值”而使用

数据

属性绝不会使事情过于复杂，这就是“存储与匹配元素关联的任意数据”的目的。。。在您的示例中使用自定义属性，如

initwidth

，是一种非常糟糕的做法，html验证程序会将其视为警告或错误