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

Question

I have an element set as position:fixed , and bottom: auto; and at some point I do .animate({bottom : '10%'}); it slides smoothly, and then I want to set it back to auto.

If I do .css('bottom','auto'); it slides, but not slowly. So it goes to original position, instantly.

I cannot use .animate(); so how can I do this?

one way could be using .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.

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.

Answer 1

You can't slowly set something to auto in CSS because once it becomes auto, computations happen to actually assign auto to a value. Since you're doing this in JS anyway, can't you do the computations and set the bottom value to that?

Answer 2

Like this ?

http://jsfiddle.net/a8tQ2/

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

Answer 3

Check out this link 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

You can do it in CSS 3 using the transitions support: http://css3.bradshawenterprises.com/

For example:

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