play animation every 3 seconds

  1. MDB Home Page
  2. Support Main Page
  3. jQuery
Topic: play animation every 3 seconds

Leandro Francisco asked 2 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 2 years ago

Hi,

did you try using a loop for that?

Best,

Piotr

Leandro Francisco commented 2 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 2 years ago

Hi, 

can you put your code to our snippets?

I think It can be some bug.

Best,

Piotr
Write
Create snippet
Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.5.10
  • Device: Desktop PC
  • Browser: All
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags
animation repeat jquery
Related topics
0
How do I disable animations?
2
Integration issue with Webpack-encore symfony 4
2
MDBootstrap is no longer compatible with Webpack and TypeScript
2
DataTables and ajax
1
WOW callback not working
About author
Leandro Francisco
30Support score
3Questions 1Answers
0Snippets likes 0Snippets

We use cookies to offer you a better browsing experience, analyze site traffic, personalize content, and serve targeted advertisements. Read about how we use cookies and how you can control them by clicking "Cookie Settings." If you continue to use this site, you consent to our use of cookies.