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

How to change css property to auto, slowly with jQuery?

本文关键字：属性 auto css 何使用 jQuery 慢慢      更新时间：2023-09-26

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

如果我这样做.css('bottom','auto');它会滑动，但不会很慢。所以它会立即进入原始位置。

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

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

我也试着放一个很长的-webkit-transition时间，但它仍然立即移动到原始位置。

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

你不能在CSS中慢慢地将某些东西设置为auto，因为一旦它变成auto，计算就会碰巧将auto分配给一个值。 既然你无论如何都在 JS 中这样做，你不能进行计算并将底部值设置为该值吗？

像这样吗？

http://jsfiddle.net/a8tQ2/

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

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

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

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

例如：

div
{
 transition: width 1s linear 2s;
 /* Safari */
 -webkit-transition:width 1s linear 2s;
}
相关文章：