Use css id to animate a div

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.

Honestly man. Go read a few tutorials before asking question here simple as that. This site also has tons of similar posts. — Piotr Kula, Apr 16 '12 at 09:18
@ppumkin I'm sincerely curious, could you post an answer / a hint to this "Simple" question? I don't think it is _that_ simple — Andreas Wong, Apr 16 '12 at 09:19
I dont understand your question. You can either use CSS3 to animate of jQuery animate function. Are you trying to invent something in the middle? Also did you see this http://jqueryui.com/ and this http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles — Piotr Kula, Apr 16 '12 at 09:21
@ppumkin I think you misread the question `.animate()` just can't do what he asks. — Andreas Wong, Apr 16 '12 at 09:23

score 3 · Accepted Answer · answered Apr 16 '12 at 09:23

3

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");

answered Apr 16 '12 at 09:23

Robin Castlin

10,956
1
28
44

Magic question. What about IE7, 8? :) – Miha Eržen Apr 16 '12 at 09:25
Nice answer, but this isn't really workable as IE has no support for this at all. – Rory McCrossan Apr 16 '12 at 09:25
This is obviously best solution for animating. Screw IE :) THX! – Miha Eržen Apr 16 '12 at 09:34
2

No support at all? The box gets expanded to new dimensions, so the end result is the same. I honestly don't think most IE7 and IE8 users have that web browser for an enhanced user experience, and simply wants functionality rather then eyecandy. Aslong as those users can see the content and no bugs occur, I'm satisfied. – Robin Castlin Apr 16 '12 at 09:34
IE Users need to upgrade. If the user is not up with times then why should it stop webdeveloeprs from using CSS3. Hence, it will force more users to goto firefox or chrome or IE9..10? if we use CSS3 everywhere and ignore the oldies. – Piotr Kula Apr 16 '12 at 09:35

score 0 · Answer 2 · answered Apr 16 '12 at 09:17

This is not possible. The animate() method only accepts a map of properties to change.

It may be possible to create a map from a hidden element which has the class already applied to it, but this would be very tricky to implement as you wouldn't be able to know programmatically which styles were set from your stylesheet, and which are auto-set by the browser.

score 0 · Answer 3 · answered Apr 16 '12 at 09:19

0

You can add or remove CSS class for a particular element using jquery

$('#nice_div').click(function(){
this.addClass('animate');
                              });

You can alos remove the class using

$('#nice_div').removeClass('animate');

answered Apr 16 '12 at 09:19

Priyank Patel

6,898
11
58
88

Well i want to use animation not just adding and removing classes. – Miha Eržen Apr 16 '12 at 09:22
But this will not make the change a smoothe transition, it will just instantly change from one state to another. – Rory McCrossan Apr 16 '12 at 09:22

score 0 · Answer 4 · edited Nov 26 '13 at 18:20

Hey this is not possible as jQuery animate() function has certain properties and we need to pass. it does not directly connect to css class.

additionally if you need to ass new class to the same element you can use addClass() function or css() function as per your requirement.

What you can try to achieve something like this is have a hidden file on page. Access the value in hidden field and concatenate the value in animate() function.

score -1 · Answer 5 · answered Apr 16 '12 at 09:16

You can try using jquery

To animate any element, such as a simple image:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
  style="position: relative; left: 10px;" />

To animate the opacity, left offset, and height of the image simultaneously:

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

I think the OP knows how to normally animate with jquery, he wants to animate using a pre-defined class. — Th0rndike, Apr 16 '12 at 09:17

Use css id to animate a div

5 Answers5