CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
jeff
jeff

Reputation: 13673

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

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.

Upvotes: 0

Views: 1825

Answers (4)

Rafi
Rafi

Reputation: 11

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

Upvotes: 1

Yair Nevet
Yair Nevet

Reputation: 13013

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

Upvotes: 0

Paul Rad
Paul Rad

Reputation: 4882

Like this ?

http://jsfiddle.net/a8tQ2/

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

Upvotes: 1

mitchfuku
mitchfuku

Reputation: 309

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?

Upvotes: 3

Related Questions