Question

我希望逐渐显示一些字符，所以我已经构建了这个脚本。然而，延迟似乎根本没有执行 - 我试图把它变成数千，而结果没有变化。我错过了什么？

$(document).ready(function () {

    var 
        i,
        d = [500, 300, 600, 1000],
        t = "String";

    $("body")
        .delay(flashDuration[0])
        .animate({ backgroundColor: "#888888" }, d[1])
        .animate({ backgroundColor: "#222222" }, d[2])
        .animate({ backgroundColor: "#F8ECC2" }, d[3], null, function () {
            for (i = 0; i < t.length; i++)
                $("<span>" + t.substr(i, 1) + "</span>")
                    .addClass("hidden")
                    .delay(i * 2000) /* this delay doesn't execute */
                    .addClass("visible")
                    .appendTo("#floatingName");

        });
});

请不要因为持续时间和标题而咬我的头。我缩写名称是因为每个程序员都喜欢神秘的，非自我解释的短变量名。对？说真的，我试图避免包装。

此外，我试图在jsFiddle here上发帖，但该示例甚至没有闪屏，更不用说正确执行延迟了。

Answer 1

animate（）的第二个参数是动画应为其设置动画的时间。在动画开始之前没有时间。你应该在链中的每个animate（）之间放入delay（）。

$("body")
    .delay(flashDuration[0])
    .animate({ backgroundColor: "#888888" }).delay(d[1])
    .animate({ backgroundColor: "#222222" }).delay(d[2])

依旧......

您还可以使用animate（）的队列选项来制作动画堆栈，而不是紧接着彼此运行。

这里解释了所有 http://api.jquery.com/animate/

修改

延迟不会延迟执行脚本只会延迟动画队列中的下一个项目。所以它不能以这种方式使用。你应该使用setTimeout。

http://api.jquery.com/delay/

.delay（）方法最适合在排队的jQuery之间延迟效果。因为它是有限的 - 例如，它没有提供一种方法取消延迟-.delay（）不是JavaScript本机的替代品 setTimeout函数，可能更适合某些用途例。

Answer 2

据我所知，jQuery本身仍然不支持彩色动画。

以下是jsFiddle上的代码版本，其中包含颜色动画扩展名：

http://jsfiddle.net/8XUpL/4/

jQuery语句没有延迟

2 个答案: