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.

This may be relevant to your needs: http://stackoverflow.com/questions/5003220/javascript-jquery-animate-to-auto-height — jsea, Sep 29 '13 at 10:40

score 3 · Answer 1 · answered Sep 29 '13 at 10:34

3

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?

answered Sep 29 '13 at 10:34

mitchfuku

309
1
2
7

score 1 · Answer 2 · answered Sep 29 '13 at 10:37

1

Like this ?

http://jsfiddle.net/a8tQ2/

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

answered Sep 29 '13 at 10:37

Paul Rad

4,820
1
22
23

score 1 · Answer 3 · answered May 21 '14 at 14:29

1

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');
 });

answered May 21 '14 at 14:29

Rafi

11
1

Yair Nevet · Answer 4 · 2013-09-29T10:43:21.110

0

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;
}

edited Sep 29 '13 at 10:43

answered Sep 29 '13 at 10:36

Yair Nevet

12,725
14
66
108

I also tried that. But maybe this way: can I do translate(0 , **to** a certain position); ? – jeff Sep 29 '13 at 10:37

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

4 Answers4