如何使用jQuery慢慢将css属性更改为auto？

Question

我有一个元素设置为position:fixed 和bottom: auto;，在某些时候我做了.animate({bottom : '10%'});，它滑动顺畅，然后我想将其设置回自动。

如果我执行.css('bottom','auto');，它会滑动，但不会很慢。所以它会立即回到原来的位置。

我不能使用.animate();，我该怎么做呢？

一种方法可能是使用 .toggleClass(); ，但没有不改变其类的方法吗？

我也尝试了很长的-webkit-transition时间，但它仍然会立即移动到原始位置。

另一种解决方案是将初始位置保存在变量中并将其放回那里，但这对我不起作用，因为初始位置可能会或可能不会在此函数中改变。

Answer 1

您不能在 CSS 中慢慢将某项设置为自动，因为一旦它变为自动，计算就会碰巧将自动分配给一个值。既然你是在 JS 中做这个，你不能做计算并将底部值设置为那个吗？

Answer 2

像这样？

http://jsfiddle.net/a8tQ2/

$('#scr').animate({
    bottom: '10%'
}, 1000, function() {
 $(this).css('bottom', 'auto');
});

Answer 3

查看此链接http://api.jquery.com/animate/

 $('#uiAdminPanelMenu li a').hover( function(){
 $(this).animate({'background-color': '#D3E1FA'}, 'slow');
 },
 function(){
 $(this).animate({'background-color': '#F4F4F4'}, 'slow');
 });

Answer 4

您可以在 CSS 3 中使用过渡支持：http://css3.bradshawenterprises.com/

例如：

div
{
 transition: width 1s linear 2s;
 /* Safari */
 -webkit-transition:width 1s linear 2s;
}