0

我有两个 div( action,action2)，如果滚动量高于 100，它们将action2进行动画处理。我想要的是从右侧和底部的 40% 开始动画，然后动画到右侧和底部的 30%，然后再到右侧和底部的 40%。我尝试使用以下代码

$(document).ready(function () {
    $(document).scroll(function () {
        var t = $(document).scrollTop();
        if (t > 100) {
            $('#action').stop().animate({
                right: "50%",
                bottom: "50%"
            }, 1000, "easeOutBounce");
            $('#action2').stop().animate({
                right: "40%",
                bottom: "40%"
            }, 1000, "easeOutBounce");
            $('#action2').stop().delay(800).animate({
                right: "30%",
                bottom: "30%"
            }, 1000, "easeOutBounce");
            $('#action2').stop().animate({
                right: "40%",
                bottom: "40%"
            }, 1000, "easeOutBounce");
        } else {
            $('#action').stop().animate({
                right: "0",
                bottom: "0"
            }, 1000, "easeOutBounce");
            $('#action2').stop().animate({
                right: "0",
                bottom: "0"
            }, 1000, "easeOutBounce");
        }
    });
});

这个做#action2div 动画多次。我希望它像代码一样动画一次，比如从 40% 到 30% 然后 40% 就是这样。这段代码有什么问题。这是小提琴http://jsfiddle.net/BtX8v/

检查此步骤1 的 2 和 3 查看评论我没有发布超过两个链接和图像的声誉。

4

1 回答 1

3

替换此行

$(document).scroll(function()

有了这个

$(document).one("scroll", function()

将one()只运行一次事件，而不是scroll()or on()。

文件

我没有注意到您的事件中有动画的条件。在这种情况下，试试这个（添加一个变量来跟踪它是否已经运行，然后基于它运行）：

var done = false;
$(document).scroll(function () {
    var t = $(document).scrollTop();
    if (t > 100 && !done) {
        done = true;
        $('#action').stop().animate({

随着对这个问题的更多澄清，您似乎只是在根据 div 是否已经启动来寻找不同的功能。尝试这样的事情：

小提琴

var actionsUp = false;
$(document).scroll(function () {
    var t = $(document).scrollTop();
    if (t > 100) {
        $('#action').stop().animate({
            right: "50%",
            bottom: "50%"
        }, 1000, "easeOutBounce");
        $a2 = $('#action2');
        if (actionsUp) {
            $a2.stop().animate({
                right: "30%",
                bottom: "30%"
            }, 1000, "easeOutBounce", function () {
                $a2.animate({
                    right: "40%",
                    bottom: "40%"
                }, 1000, "easeOutBounce");
            });
        } else {
            $a2.stop().animate({
                right: "40%",
                bottom: "40%"
            }, 1000, "easeOutBounce");
        }
        actionsUp = true;
    } else {
        actionsUp = false;
        $('#action').stop().animate({
            right: "0",
            bottom: "0"
        }, 1000, "easeOutBounce");
        $('#action2').stop().animate({
            right: "0",
            bottom: "0"
        }, 1000, "easeOutBounce");
    }
});
于 2013-09-05T18:42:47.490 回答