Im trying to callback a simple animation using jquery or javascript

Question

The animation in my .css file is called @keyframes scrollTextTwo{}. the code in my .js file is:

$(document).ready(function(){
  rightBox.style.animation = "scrollTextTwo 10s 1";
});

When I load the .html file in the browser it perfectly runs one time or it will run infinitely if i replace the "1": after the scrollTextTwo 10 with infinite. My question is how can I get a second object such as #leftBox from my .css file to animate ONLY after the #rightBox has completed its animation in the above example.

I have attached all three docs: html/css/.js with code pen just in case anyone wants to dive deep into the code.

http://codepen.io/hoyos/pen/dGMGbX

i made an error the next animation isnt "leftBox" its saposed to be rightBoxTwo, for anyone actualy looking at the codepen — German Hoyos
– German Hoyos, Commented Dec 17, 2015 at 15:02

Josh Crozier · Accepted Answer · 2015-12-17 14:56:29Z

2

You could listen to the animationend event. Use the .one() method to attach the event listener so that it only fires once. When the event is triggered, that means the animation has ended, which means that you can animate the other element in the callback.

Updated Example

$('#rightBox').css('animation', "scrollTextTwo 5s 1").one('animationend', function () {
  $('#leftBox').css('animation', "scrollTextTwo 5s 1");
});

answered Dec 17, 2015 at 14:56

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

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

1 Comment

German Hoyos Over a year ago

i copied $('#rightBox').css('animation', "scrollTextTwo 5s 1"); and tested to see if it would iterate once and it did so thx, but then i put $('#rightBox').css('animation', "scrollTextTwo 5s 1").one('animationend', function () { $('#rightBox').css('animation', "scrollTextTwo 5s 1"); }); and tested to see if it would iterate twice to then test it the next step and it would iterate at all

Collectives™ on Stack Overflow

Im trying to callback a simple animation using jquery or javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related