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

Answer 1

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