[英]How to change css property to auto, slowly with jQuery?
I have an element set as position:fixed
, and bottom: auto;
我有一个元素设置为
position:fixed
和bottom: auto;
and at some point I do .animate({bottom : '10%'});
在某个时候,我做
.animate({bottom : '10%'});
it slides smoothly, and then I want to set it back to auto. 它可以平滑滑动,然后将其设置回自动。
If I do .css('bottom','auto');
如果我这样做
.css('bottom','auto');
it slides, but not slowly. 它会滑动,但不会缓慢。 So it goes to original position, instantly.
因此,它立即转到了原始位置。
I cannot use .animate();
我不能使用
.animate();
so how can I do this? 那我该怎么办呢?
one way could be using .toggleClass();
一种方法是使用
.toggleClass();
, but isn't there a way without changing its class ? ,但是没有改变类的方法吗?
I also tried to put a long -webkit-transition
time, but it still moves to original position instantly. 我还尝试了较长的
-webkit-transition
时间,但它仍然会立即移至原始位置。
And another solution could be to save the initial position in a variable and put it back there, but it does not work for me, because the initial position may, or maynot change in this function. 另一种解决方案是将初始位置保存在变量中,然后将其放回该位置,但这对我不起作用,因为初始位置可能会或可能不会在此函数中更改。
You can't slowly set something to auto in CSS because once it becomes auto, computations happen to actually assign auto to a value. 您不能在CSS中缓慢地将某些内容设置为auto,因为一旦变为auto,计算就会实际将auto赋给一个值。 Since you're doing this in JS anyway, can't you do the computations and set the bottom value to that?
由于您无论如何都在JS中进行此操作,因此您不能进行计算并为其设置底值吗?
Like this ? 像这样 ?
http://jsfiddle.net/a8tQ2/ http://jsfiddle.net/a8tQ2/
$('#scr').animate({
bottom: '10%'
}, 1000, function() {
$(this).css('bottom', 'auto');
});
Check out this link http://api.jquery.com/animate/ 查看此链接http://api.jquery.com/animate/
$('#uiAdminPanelMenu li a').hover( function(){
$(this).animate({'background-color': '#D3E1FA'}, 'slow');
},
function(){
$(this).animate({'background-color': '#F4F4F4'}, 'slow');
});
You can do it in CSS 3 using the transitions support: http://css3.bradshawenterprises.com/ 您可以使用过渡支持在CSS 3中完成此操作: http : //css3.bradshawenterprises.com/
For example: 例如:
div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.