Weird behavior while adding and removing class using jquery

Question

I have certain set of predefined css classes, using which i can animate a div. The scenario is that i am trying to animate a div with 'slide in effect'. Just by adding 'slide in' class to the div will make the div slide in. But the problem comes when do that second time. on second time , the div will already have 'slide in' class , so i am removing the 'slide in' class and i am adding the same class again to animate. But the animation doesnt happen, but when i add a 10ms delay before adding the 'slide in' class just after removing the 'slide in' class, the animation occurs.

Demos, works well only in webkit browsers

Demo one, (No time delay added, animation doesnt work second time)

Demo1 Try the slide in button two times.

Demo two, (Time delay added , animation works)

Demo2Try the slide in button two times.

I want to know , how this can be done without relying on time delay

I know, that this isn't answer to your question, but it might be easier to use jqueryui.com/effect instead — m3div0
– m3div0, Commented Oct 23, 2012 at 9:58

RRikesh · Accepted Answer · 2012-10-23 10:46:17Z

2

For demo 1 - replace your slide function by this:

function slide(){
  $('#tg').addClass('slide in');
 var t= setTimeout(function(){$('#tg').removeClass('slide in');},600);
}

I removed the class after the animation is complete. Demo: http://jsbin.com/eyerot/12/edit

For autoscroll: Replace your js by this:

function slide(){
  interval = setInterval(function(){slide_me();},2000);
}

function slide_me(){
  $('#tg').addClass('slide in');
    t= setTimeout(function(){$('#tg').removeClass('slide in');},600);
}

edited Oct 23, 2012 at 10:46

answered Oct 23, 2012 at 10:23

RRikesh

14.5k5 gold badges55 silver badges74 bronze badges

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

Comments

alexpls · Accepted Answer · 2012-10-23 10:34:08Z

1

The best thing to do would be to bind your animated element to the animationend callback that gets fired when a CSS animation completes.

Here's how I would rewrite your JS:

// Bind your element to animationend callbacks from all supporting browsers
$('#tg').bind('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function(event){
  // Each time this callback is called the "slide in" classes are removed.
  $('#tg').removeClass('slide in');
});

// Each time the button is clicked the classes are re-added
function slide() {
  $('#tg').addClass('slide in');
}

answered Oct 23, 2012 at 10:34

alexpls

1,97420 silver badges29 bronze badges

Collectives™ on Stack Overflow

Weird behavior while adding and removing class using jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related