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

Question

I copied the css and javascript into jsfiddle, but I don't know what to put in html, anyway, I'm trying to get a single image to pulse, the problem is it is only defined as a class, and I'm having trouble with it. When I have it alone as it's own function it works fine http://jsfiddle.net/EQs9N/ , but when I wrap it in an invisible function (or whatever its called) the animation stops firing http://jsfiddle.net/EQs9N/1/ . Does this have something to do with me animating a class? Is there anyway to define it as an object, and would this help? Thanks

Answer 1

$(document).ready(function() { is the way jquery delays any code execution to after the page is fully loaded.

If you wrap this part of the code within a function, it won't work anymore and the code would only be called when you call the function. That's why it doesn't work when you wrap your code.

See this tuto for the good use of $(document).ready

Answer 2

In your second jsfiddle you're defining a function (function A) but not actually calling it.

If you change your code slightly and pass A to document.ready (instead of passing an anonymous function) you should find that it works:

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

Answer 3

You are declaring a function A, but you aren't calling the function.

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

That will create an anonymous function (is that the term you were looking for) and execute it. I'm not sure why you need to wrap it in this case, $(document).ready() should be sufficient.

Side note on jsfiddle usage:
In jsfiddle, you can select onDomReady instead of onLoad from the framework dropdowns to automatically wrap your javascript in $(document).ready() making your invokation of $(document).ready() redundant. The option onLoad will wrap it in $(window).load()

If you select "no wrap", then jsfiddle will only surround it with the necessary script tags and then put that in the head or the body, depending on the selected option.