Question

我看到很多人都在为此奋斗（包括我在内）。我想这主要是因为不完全了解Javascript范围的工作原理。

图片幻灯片就是一个很好的例子。因此，假设您有一系列图像，第一个图像淡入=＆gt;等待=＆gt;淡出=＆gt;下一张图片。

当我第一次创造这个时，我已经有点迷失了。我认为创建基础知识的最大问题是保持清洁。我注意到使用回调可以非常快速地完成。

因此，为了使其更加复杂，大多数幻灯片都有控制按钮。接下来，上一步，转到img，暂停，...

我已经尝试了一段时间了，这就是我得到的地方：

$(InitSlideshow);

function InitSlideshow() {
    var img = $("img").hide();

    var animate = {
        wait: undefined,
        start: function() {
            img.fadeIn(function() {
                animate.middle();
            });
        },

        middle: function() {
            animate.wait = setTimeout(function() {
                animate.end();
            }, 1000);
        },

        end: function() {
            img.fadeOut(function() {
                animate.start();
            });
        },

        stop: function() {
            img.stop();
            clearTimeout(animate.wait);
        }
    };

    $("#btStart").click(animate.start);
    $("#btStop").click(animate.stop);

};

此代码有效（我认为），但我想知道其他人如何处理Jquery中的序列动画？提示和技巧是最受欢迎的。那么是处理这个问题的良好资源的链接。

如果在我删除此问题之前已经询问过此问题。我马上找不到很多关于此的信息。我希望这个社区维基是正确的，因为我的问题没有一个正确答案。

亲切的问候，

Pickels

Answer 1

我想这主要是因为不完全了解Javascript范围的工作原理。

Javascript范围是功能级别，而不是块级别。就这么简单。如果您在函数中的任何位置使用var声明变量，则该函数内的任何位置都可以看到它。

使用Javascript 1.7（提示：IE甚至不支持），您可以使用let关键字而不是var关键字来声明块范围变量。这与Java / C /等更接近。程序员倾向于期待。

Jquery中的连续动画

1 个答案: