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

Posted 2023-05-08

【中文标题】如何使用jQuery慢慢将css属性更改为auto？

【英文标题】：How to change css property to auto, slowly with jQuery?

【发布时间】：2013-10-05 07:11:27

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

请问可以添加jsFiddle吗？

这可能与您的需求有关：***.com/questions/5003220/…

你的意思是用动画..

【参考方案1】：

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

【参考方案2】：

像这样？

http://jsfiddle.net/a8tQ2/

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

【参考方案3】：

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

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

【参考方案4】：

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

例如：

div

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

【讨论】：

我也试过了。但也许这样：我可以翻译（0，到某个位置）； ?