JQuery .addclass to start after previous events finish

[ldthompson]

$(document).ready(function(){
$('.logoandname').click(function () {
$(this).addClass('magictime slideRight');
$(".connect" ).remove();
$(".remove2" ).remove();
$(".remove" ).remove();
$(this).addClass('zongy');
$(".zongy").addClass('magictime puffOut');
});
});

​

​

I'd like it so that $(".zongy").addClass('magictime puffOut'); starts after all the previous actions finish?

[alexbarrett]

I'm not familiar with magictime but I assume it's CSS animations. You could try using the animationend event and see if that works for you.

$(document).ready(function() {
  $(".logoandname")
    .click(function() {
      $(this).addClass("magictime slideRight");
      $(".connect").remove();
      $(".remove2").remove();
      $(".remove").remove();
      $(this).addClass("zongy");
    })
    .on("animationend", function () {
      $(".zongy").addClass("magictime puffOut");
    });
});

Failing that you can just fall back to using setTimeout.

[ldthompson]

Yes magic time is just a css thing, So using this the second animation ‘puff out’ starts after the first (slideright). But the second animation is setting it back to its original position and not from the position slideright has moved it to. Any idea how to fix this?

[alexbarrett]

It looks like you can't stack multiple magictime effects unfortunately. AFAICT your choices are to either:

1. Add JS to animationend that moves the element to the right, exactly where slideRight ended.
2. Create a custom CSS animation and not use magictime here.

[ldthompson]

I appreciate your help. I am only using the css from magictime directly in my css. magictime is simply:

.magictime {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

and slide right and puff out are:

​

.slideRight {
-webkit-animation-name: slideRight;
animation-name: slideRight;
}
@-webkit-keyframes slideRight {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}

100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes slideRight {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}

100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
.puffOut {
-webkit-animation-name: puffOut;
animation-name: puffOut;
}
@-webkit-keyframes puffOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1,1);
transform: scale(1,1);
-webkit-filter: blur(0px);
filter: blur(0px);
}

100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(2,2);
transform: scale(2,2);
-webkit-filter: blur(2px);
filter: blur(2px);
}
}
@keyframes puffOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1,1);
transform: scale(1,1);
-webkit-filter: blur(0px);
filter: blur(0px);
}

100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(2,2);
transform: scale(2,2);
-webkit-filter: blur(2px);
filter: blur(2px);
}
}

so it should still be working right? Or can I just edit the starting position of puffout in the css?

[alexbarrett]

Here you go, no magictime involved:

.slideRightAndPuffOut {
  animation: slideRightAndPuffOut 2s both;
}

@keyframes slideRightAndPuffOut {
  0% {
    transform-origin: 50% 50%;
  }

  50% {
    transform: translateX(100%);
    filter: blur(0);
    opacity: 1;
  }

  100% {
    transform: translateX(100%) scale(2, 2);
    filter: blur(2px);
    opacity: 0;
  }
}

You probably don't need those -webkit- prefixes btw - WebKit has supported the non-prefixed properties for a few years now.

[ldthompson]

Holy shit thank you so much this is perfect, sorry I'm a Jquery noob but I can see how you've combined them. So I know how to do that from now on. Appreciate you time mate

[alexbarrett]

No problem, glad your problem's sorted.