Question

我有两个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");
        }
    });
});

这样做#action2 div动画多次。我希望它在代码中动画一次，例如40％到30％，然后就是40％。这段代码有什么问题。这是小提琴http://jsfiddle.net/BtX8v/

选中此step1获取2和3，查看我没有声望的评论，以发布两个以上的链接和图片。

Answer 1

替换此行

$(document).scroll(function()

这一个

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

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

documentation

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

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

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

fiddle

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

如何只为div设置动画一次？

1 个答案: