javascript - 使用 JQuery 的 animate() 为 CSS 值设置动画

Question

我想将元素的样式动画化为使用 CSS 定义的值。我不想为默认值设置动画，所以 animate({'width':'auto'}) 将不起作用。

例如:

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

<div id=element></div>

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

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

Answer 1

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

1. 如果 width 和 animate 在同一范围内，您可以这样做(在本地 var 中设置新宽度之前存储初始宽度并使用它在 animate 中):

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

2. 如果您稍后调用 animate 并且由于超出范围而无法使用局部变量，您可以将初始宽度存储在 data 中属性

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

   然后在调用 animate 时检索它:

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

查看工作 FIDDLE对于方法 #2 没有使用 JS 变量