Change element class without using css animation

Question

I have a class with the following type of css animaton

.cssanimation {
    -webkit-transition: 0.2s all ease-in-out
    -o-transition: 0.2s all ease-in-out
    -moz-transition: 0.2s all ease-in-out
    transition: 0.2s all ease-in-out
    .. some other changes in position
}

I have the div

<div id="thediv"> ... </div>

$('#thediv').addClass('cssanimation') //animates the object

I do use this animation at some point but sometimes I'd like to add it without invoking the animation

Does Jquery have a way in which I can add classes without invoking their css animations?

what is the reason to add a CSS class with animation if you don't want to use it? Create another that fit your needs — Sotiris
– Sotiris, Commented Jun 2, 2012 at 9:53
Id like to use it later, but at the rendering stage when I create the content with jquery I wouldnt like to see it — Tarang
– Tarang, Commented Jun 2, 2012 at 9:54
You're asking, essentially, 'can I add a class without using parts of that class?' and the answer is, of course, 'no.' Use a second/different class. — David Thomas
– David Thomas, Commented Jun 2, 2012 at 9:54
Why don't you just add the class when you want to animate it? — Ayman Safadi
– Ayman Safadi, Commented Jun 2, 2012 at 9:56
Aren't the changes in position supposed to be set using @keyframes? or do you mean transitions? — Ruan Mendes
– Ruan Mendes, Commented Jun 2, 2012 at 10:36

Logan · Accepted Answer · 2012-06-02 10:00:56Z

3

Simply you create another class without animation and use it.

It's not difficult to change CSS rules at runtime, but apparently it is difficult to find the rule you want. PPK has a quick tour of this on www.quirksmode.org.

answered Jun 2, 2012 at 10:00

Logan

1,6944 gold badges21 silver badges35 bronze badges

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

Comments

Ruan Mendes · Accepted Answer · 2012-06-02 10:49:13Z

I think you mean CSS Transitions. For http://www.w3.org/TR/css3-animations/animations, you can define keyframes to fine tune a transition, but I don't think you need it.

The following code does what you need, I think. http://jsfiddle.net/Y69VB/1/

HTML

<button id='anim'>animate</button>
<button id='move'>move</button>
<div id='moveme' class='pos1'>Here</div>

CSS

.cssanimation {
    transition: top 2s;
    -moz-transition: top 2s; /* Firefox 4 */
    -webkit-transition: top 2s; /* Safari and Chrome */
    -o-transition: top 2s; /* Opera */
}

#moveme {
   position: absolute;
   width: 50px;
   height: 50px;
   border: 1px solid red;
}

.pos1 {
    top: 30px;
}

.pos2 {
   top: 80px;
}

JavaScript

var $moveme = $('#moveme');

function togglePosition() {
    $moveme.toggleClass('pos1');
    $moveme.toggleClass('pos2');
}

$('#anim').click(function(){
    $moveme.addClass("cssanimation");
    togglePosition();
});

$('#move').click(function(){
    $moveme.removeClass("cssanimation");
    togglePosition();
});

Esailija · Accepted Answer · 2012-06-02 10:15:33Z

0

$('#thediv').detach().addClass('cssanimation').appendTo('body');

http://jsfiddle.net/R5mQC/3/

edited Jun 2, 2012 at 10:15

answered Jun 2, 2012 at 10:10

Esailija

140k24 gold badges280 silver badges328 bronze badges

Collectives™ on Stack Overflow

Change element class without using css animation

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related