javascript - 如何使用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://api.jquery.com/animate/

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

Answer 3

像这样 ？

http://jsfiddle.net/a8tQ2/

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

Answer 4

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

例如：

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