play animation every 3 seconds


Topic: play animation every 3 seconds

Leandro Francisco asked 6 years ago

I have 2 images, and I want to change the animation in the second one. I want to enter with one animation and then set another and repeat it forever, and there is no way to make it work, I tried with the same code for both images, and in the first image works, but in the second one not. <script type="text/javascript"> $(document).ready(function() { new WOW().init(); setTimeout(function() { $("#image1").removeClass("wow fadeIn"); $("#image1").removeAttr("style"); $("#image1").addClass("wow tada"); $("#image2").removeClass("wow fadeIn"); $("#image2").removeAttr("style"); $("#image2").addClass("wow tada"); }, 2500); setInterval(function() { WOW().init(); }, 3000); }); </script> HTML for images are these: <img class="d-block wow fadeIn" id="image1" src="img1.gif" width="372" height="321" alt=""/> <img class="d-block wow fadeIn" id="image2" src="img2.gif" width="372" height="79" alt=""/>   And also, is there any way to call the WOW().init() or the replay function for an specific ID only?!   Thanks!

Piotr Glejzer staff commented 6 years ago

Hi,

did you try using a loop for that?

Best,

Piotr


Leandro Francisco commented 6 years ago

Now I remove the animation class and add it again in the interval instead of in the timeout and it works, but the rest of element with animations stopped workin correctly, they still try to animate but too fast and you don't have time to see the effect, the first that u can see without scroll, works better, but the others... they continue being hidden and appearing when u scroll down, but with no effect.

setInterval(function() {
  $("#image2").css({"animation-name":"tada"});
  setTimeout(function() {
    $("#image2").removeAttr("style");
  }, 2500);
}, 15000);
 
Thats the code that I am using, but the problem is not on the code, because I removed it and the problem is still there, the problems appears adding the
new WOW().init();
and if I remove from there works, and if I add the new WOW().init(); in another page, the problem appears again.
 
Any idea?!?! can the wow.init be called 3 times?!
 
Thanks.

Piotr Glejzer staff commented 6 years ago

Hi, 

can you put your code to our snippets?

I think It can be some bug.

Best,

Piotr


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: Desktop PC
  • Browser: All
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No