Javascript 导致问题的animate.css的自定义函数

我正在为我的项目使用

animate.css

库。我认为创建一个jQuery函数来完成大部分工作会更容易。以下是函数：

$(function () {    
    $.fn.extend({
        animateCss: function (animationName, callback) {
            var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
            this.addClass('animated ' + animationName).one(animationEnd, function () {
                $(this).removeClass('animated ' + animationName);
                if(callback){
                    callback();
                };
            });
        }
    });

});

它可以工作，我可以从jQuery对象调用它。问题是，当我从一个对象传入回调函数时，它会被调用，但当另一个对象调用该函数而不传入回调时，该对象的同一函数会再次被调用

---

我不太确定这是怎么发生的，我有Java背景。这个函数有没有办法保留传递给其他对象的回调变量？

举个例子，我在这里使用了最小值，但css3的优点是它不需要运行javascript，只需要浏览器来解释它；因此，css3只能在很久以前起作用

，下面是一个简单的反弹示例：

。标题大{
字体大小：48px；
}

动画我

这里有一个例子，我在这里使用了最小值，但css3的美妙之处在于它不需要运行javascript，只需要浏览器来解释它；因此，css3只能在很久以前起作用

，下面是一个简单的反弹示例：

。标题大{
字体大小：48px；
}

为我制作动画

为什么不简单地将动画css类添加到html中？@NathanielFlick添加后，我需要删除这些类，这样它们才能再次使用。另外，我不想在动画完成后运行函数。这就是为什么我将这些功能封装在这个函数中。为什么你不简单地将动画css类添加到你的html中？@NathanielFlick我需要在添加类之后删除它们，这样它们才能再次使用。另外，我不想在动画完成后运行函数。这就是为什么我将功能封装在这个函数中。我确实希望动态添加动画。此外，这个函数允许我重用代码。该函数不是在每个动画完成后不断删除类，而是简化了代码。我只需要找出回调出现问题的原因。函数testAnim（x）{$（'#animationSandbox'）.removeClass（）.addClass（x+'animated'）.one（'webkitAnimationEnd mozAnimationEnd MSAnimationEnd-oanimationend-animationend'，函数（）{$（this.removeClass（）；}）$（document）.ready（function（）{$（'.js--triggerAnimation'）。单击（function（e）{e.preventDefault（）；var anim=$（'.js--animations'）.val（）；testAnim（anim）；$（'.js--animations'）。更改（function（）{var anim=$（this.val（）；testAnim（anim）；}）；我在评论中发布的脚本正是Animate css用于回调的脚本，这实际上是一个全局函数，他们可以调用它，用他们想要使用/运行的动画填充变量“x”。如果能看到剩下的代码就好了，也就是html和css，这样我们可以进行诊断。您确实有一个看起来不正确的this调用（缺少括号）：this.addClass，因此它不是一个正确的选择器。我确实希望动态添加动画。此外，这个函数允许我重用代码。该函数不是在每个动画完成后不断删除类，而是简化了代码。我只需要找出回调出现问题的原因。函数testAnim（x）{$（'#animationSandbox'）.removeClass（）.addClass（x+'animated'）.one（'webkitAnimationEnd mozAnimationEnd MSAnimationEnd-oanimationend-animationend'，函数（）{$（this.removeClass（）；}）$（document）.ready（function（）{$（'.js--triggerAnimation'）。单击（function（e）{e.preventDefault（）；var anim=$（'.js--animations'）.val（）；testAnim（anim）；$（'.js--animations'）。更改（function（）{var anim=$（this.val（）；testAnim（anim）；}）；我在评论中发布的脚本正是Animate css用于回调的脚本，这实际上是一个全局函数，他们可以调用它，用他们想要使用/运行的动画填充变量“x”。如果能看到剩下的代码就好了，也就是html和css，以便我们进行诊断。您确实有一个看起来不正确的this调用（缺少括号）：this.addClass，因此它不是正确的选择器。