확대/축소 효과 (Animate.css)는 두 번째 클릭 또는 페이지로드없이 작동하지 않습니다.

Question

나는 버튼을 클릭 할 때마다 animate.css를 사용하여 텍스트를 확대/축소하려고합니다. 처음으로 만 작동합니다. 페이지가로드되면 처음으로 다시 작동합니다. 도움이 필요합니다.

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'); 
}) 

Answer 1

이보십시오 (애니메이션 재생) 클래스

을 다시 적용되지 않기 때문에이 될 것이다 :

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); 
 
    }); 
 

 
    
 
    });

<!--this be your button --> 
 
<button class="butt js--triggerAnimation">Animate</button> 
 

 
<!-- this be what you are animating --> 
 
<span id="animationSandbox" style="display: block;" class=""><h1 class="site__title mega">TEXT HERE</h1></span>

을 (.) : 여기

Answer 2

739,내가 당신을 위해 만든 바이올린입니다 버튼 클래스 http://jsfiddle.net/4ggaof1u/

보정, 점 제거, 그것은 class='mini-contact' 을해야합니다 그리고 당신의 스크립트가 될 것 같은

$(function() { 
    $('.mini-contact').on('click', function() { 
     var $el = $('#an'), 
      c = 'zoomIn animated'; 
     $('.contact-section').fadeIn(1, function() { 
      $el.addClass(c); 
     }).delay(1000).show(0, function() { 
      $el.removeClass(c) 
     }); 
    }); 

});