如何使用jQuery结合animate.css调用JavaScript函数

看起来你的代码里存在重复绑定点击事件的问题，这会导致动画效果不符合预期（比如第一次点击没反应，后续点击触发多次动画）。咱们一步步来修正：

问题所在 #

你在$(document).ready里给#startButton绑定了一个click事件，然后在这个事件回调里又调用animationClick函数——而animationClick本身又会给元素再绑定一次click事件。相当于你点一次按钮才会给它绑定真正的动画触发逻辑，第二次点击才会看到动画，这显然不是你想要的效果。

修正后的代码方案 #

方案1：直接调用animationClick函数 #

去掉外层多余的click绑定，直接在页面就绪时给目标元素注册动画点击事件：

// 你的动画函数保持不变
function animationClick(element, animation){ 
  element = $(element); 
  element.click( function() { 
    element.addClass('animated ' + animation); 
    window.setTimeout( function(){ 
      element.removeClass('animated ' + animation); 
    }, 600); 
  }); 
}

// 页面就绪时直接调用函数注册事件
$(document).ready(function(){
  animationClick("#startButton", 'pulse');
});

方案2：优化动画函数（避免重复绑定） #

如果担心多次调用animationClick会重复绑定事件，可以给函数加上事件解绑逻辑，确保只绑定一次：

function animationClick(element, animation){ 
  const $element = $(element); 
  // 先解绑可能存在的click事件，避免重复绑定
  $element.off('click.animation').on('click.animation', function() { 
    $element.addClass('animated ' + animation); 
    setTimeout( function(){ 
      $element.removeClass('animated ' + animation); 
    }, 600); 
  }); 
}

// 页面就绪时调用
$(document).ready(function(){
  animationClick("#startButton", 'pulse');
});

对应的HTML（确保完整引入animate.css） #

记得在HTML里完整引入animate.css样式文件，同时保证按钮标签完整：

<link rel="stylesheet" href="animate.css"> <!-- 替换为你的animate.css路径 -->

<input id="startButton" class="btn contained" type="button" value="点击触发动画">

额外优化建议 #

可以用animationend事件代替固定的600ms延迟，这样能精准匹配动画时长，避免提前移除类导致动画中断：

function animationClick(element, animation){ 
  const $element = $(element); 
  $element.off('click.animation').on('click.animation', function() { 
    $element.addClass('animated ' + animation); 
    // 监听动画结束事件，确保动画完成后再移除类
    $element.one('animationend', function() {
      $element.removeClass('animated ' + animation);
    });
  }); 
}

这样不管动画是200ms还是1000ms，都会在动画真正结束后移除类，体验更流畅。

内容的提问来源于stack exchange，提问作者user9446871