play animation every 3 seconds

Topic: play animation every 3 seconds

Leandro Francisco free 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 free 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.

<p>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.</p>
<div>
<div>setInterval(function() {</div>
<div>  $("#image2").css({"animation-name":"tada"});</div>
<div>  setTimeout(function() {</div>
<div>    $("#image2").removeAttr("style");</div>
<div>  }, 2500);</div>
<div>}, 15000);</div>
</div>
<div> </div>
<div>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
<div style="color: #bfc7d5; background-color: #292d3e; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #89ddff;">new</span> <span style="color: #ffcb8b;">WOW</span><span style="color: #bfc7d5;">()</span><span style="color: #c792ea;">.</span><span style="color: #82aaff;">init</span><span style="color: #bfc7d5;">()</span><span style="color: #bfc7d5;">;</span></div>
</div>
and if I remove from there works, and if I add the new WOW().init(); in another page, the problem appears again.</div>
<div> </div>
<div>Any idea?!?! can the wow.init be called 3 times?!</div>
<div> </div>
<div>Thanks.</div>

Please insert min. 15 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Opened

Specification of the issue

ForumUser: 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

Leandro Francisco

40Support score
5Questions 1Answers 0Snippets