当我将动画效果包装在函数中时，它停止工作。谁能告诉我为什么？

Question

我将 css 和 javascript 复制到 jsfiddle 中，但我不知道在 html 中放入什么，无论如何，我试图让单个图像脉冲，问题是它仅定义为一个类，而我遇到麻烦了。当我单独拥有它作为它自己的功能时，它工作正常 http://jsfiddle.net/EQs9N/，但是当我将它包装在一个不可见的函数（或任何它的名称）中时，动画停止触发 http://jsfiddle.net/EQs9N/1/。这与我为班级制作动画有什么关系吗？无论如何，是否可以将其定义为对象，这会有帮助吗？谢谢

Answer 1

您正在声明函数 A，但没有调用该函数。

(function(){
    ...
})()

这将创建一个匿名函数（就是您正在寻找的术语）并执行它。我不确定为什么在这种情况下需要将其包装起来， $(document).ready() 应该足够了。

关于 jsfiddle 使用的旁注：

在 jsfiddle 中，您可以从框架下拉列表中选择 onDomReady 而不是 onLoad，以自动将 javascript 包装在 $(document).ready() 中，从而调用 $(document).ready()多余的。 onLoad 选项会将其包装在 $(window).load() 中

，如果您选择“不包装”，则 jsfiddle 只会用必要的脚本标签将其包围，然后将其放在 head 或正文，具体取决于所选选项。

Answer 2

$(document).ready(function() { 是 jquery 将任何代码执行延迟到页面完全加载后的方式。

如果将这部分代码包装在函数中，则不会 函数时才会调用该代码，这就是为什么在包装代码时它不起作用的原因。

不再工作，并且只有在调用该 文件准备就绪” rel="nofollow">本教程用于很好地使用$(document).ready

Answer 3

在 你的第二个 jsfiddle 中，你正在定义一个函数（函数 A），但实际上并没有调用它。

如果您稍微更改代码并将 A 传递给 document.ready （而不是传递匿名函数），您应该会发现它有效：

function A(){
    if (1 == 1){
        function pulsate() {
            $(".image2_template").
              animate({opacity: 0.1}, 1500, 'linear').
              animate({opacity: 1}, 1500, 'linear', pulsate);
          }
        pulsate();
    } else {
        $('.image2_template').animate({
             opacity: 0,
        });
        $('.text3_template').animate({
            opacity: 0,
        });
    }
}

$(document).ready(A);