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

以下是我为您创建的小提琴：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)
        });
    });

});

zoomIn效果（Animate.css）在第二次单击或没有页面加载时不起作用

2 个答案: