How to set multiple css using jquery animate function

Question

suppose i have css like

position: fixed;
width: 200px;
height: 100px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -50px;

this css i need to set from jquery animate function for div. is it possible. i know the use of jquery animate function like

$(".ui-dialog").animate({
left: viewportwidth / 2 - $(".ui-dialog").outerWidth() / 2, 
top: viewportheight / 2 - $(".ui-dialog").outerHeight / 2
}, 1000);

thanks

What would you like to animate? For instance, position:fixed cannot be animated. — Rob W
– Rob W, Commented Oct 30, 2011 at 9:33

Luke · Accepted Answer · 2011-10-30 09:44:16Z

4

Create the CSS as a class:

div.myClass {

    position: fixed;
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -50px;

}

div.newClass {

    position: fixed;
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -50px;

}

Then dynamically add the class to the DIV element by using jQuery addClass()

$("div#myDiv").addClass("myClass");

This assumes that your DIV has the ID of myDiv like so:

<div id="myDiv"></div>

If you need to animate from it's current class to another one, you can use the switchClass() function:

This is an example of changing the class on a binding to a button

<script>
$(function() {
    $( "#button" ).click(function(){
        $( "div#myDiv" ).switchClass( "myClass", "newClass", 1000 );
    return false;   
    });
});
</script>

edited Oct 30, 2011 at 9:44

answered Oct 30, 2011 at 9:31

Luke

23.8k31 gold badges121 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:11:31Z

1

Yes, it is possible but take care of two things:

You can't animate position:fixed. (Quote from jQuery .animate() manual):

most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be

Use classes to handle this.
Use marginTop and marginLeft instead of margin-top and margin-left. (Quoted from Ricardo Vega's answer on SO):

try using "marginTop" instead of "margin-top". Normally when you use the CSS props as "border-something" or "margin-something" is better to use the "normalized" version of it, as you used to do it in DHTML (styles.marginTop).

Hope it helps.

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Oct 30, 2011 at 9:59

Pedram Behroozi

2,4973 gold badges28 silver badges48 bronze badges

Comments

Al-Mothafar · Accepted Answer · 2011-10-30 09:38:08Z

0

Your code working with me as it is :)

But if you use "viewportwidth" & "viewportheight" with "px" or "em" or what ever, use ".parseInt()" to eliminate unit :)

My code is :

var viewportwidth = 120;
var viewportheight = 120;
$(".ui-dialog").animate({
left: viewportwidth / 2 - $(".ui-dialog").outerWidth() / 2 +"px", 
top: viewportheight / 2 - $(".ui-dialog").outerHeight() / 2 +"px"
}, 1000);

});

BTW, I see you miss parentheses after "outerHeight" and the code working me with & without +"px" in FF, I hope I understood you correctly .

answered Oct 30, 2011 at 9:38

Al-Mothafar

8,2597 gold badges72 silver badges106 bronze badges

1 Comment

Al-Mothafar Over a year ago

@RobW well, that's good, maybe they solve it later, when I was learning JQuery, I saw tutorial that I must solve that using parseInt() :) so I said that here :)

Collectives™ on Stack Overflow

How to set multiple css using jquery animate function

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related