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

Answer 1

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>