jquery - zoomIn effect (Animate.css) doesnt works in second click or without page load -
jquery - zoomIn effect (Animate.css) doesnt works in second click or without page load -
this question has reply here:
animate.css doesnt work sec click 3 answersi trying zoomin text using animate.css on every click of button.it works first time. if page load works 1 time again first time. need help.
html:
<div class="row contact-section"> <div class="col-md-12"> <h1 id='an'> contact section</h1> </div> </div> <button class='.mini-contact'>animate</button>
jquery:
$('.mini-contact').on('click',function(){ $('.contact-section').fadein(); $('#an').addclass('animated zoomin'); })
it because not reapplying classes ( replaying animation )
try this:
class="snippet-code-js lang-js prettyprint-override">function appyanim(x) { $('#animationsandbox').removeclass().addclass(x + ' animated').one('webkitanimationend mozanimationend msanimationend oanimationend animationend', function(){ $(this).removeclass(); }); }; $(document).ready(function(){ $('.js--triggeranimation').click(function(e){ e.preventdefault(); var anim = "zoomin"; applyanim(anim); }); });
class="snippet-code-html lang-html prettyprint-override"><!--this button --> <button class="butt js--triggeranimation">animate</button> <!-- animating --> <span id="animationsandbox" style="display: block;" class=""><h1 class="site__title mega">text here</h1></span>
jquery css3 animate.css
Comments
Post a Comment