Question

Is there any way to animate a certain div using styles of a class?

Example (html):

<div id="nice_div"></div>

Css:

#nice_div{
    width: 200px;
    height: 150px;
}

.animate{
    width: 300px;
    height: 250px;
}

What i would like to achieve is something like this:

$("#nice_div").animate(".animate");

Obviously this code is fictional. Is there any way to achieve something similar? Oh yeah, .animate div is not available in DOM. Any help is appreciated.

Answer 1

Yes this is possible:

#nice_div {
    -webkit-transition: height 1s, width 1s;
    -moz-transition: height 1s, width 1s;
    transition: height 1s, width 1s;


    width: 200px;
    height: 150px;
}

$("#nice_div").addClass(".animate");