Question

在我的网站上有两个包含div“cloud”和“cloud2”的行李，它们位于div“sky”中

下面的JQuery脚本应该将袋子/云移到右边，但我不能让它工作。

你能告诉我我做错了什么吗？

我是一个新手，所以请在回答时记住这一点。谢谢你的帮助

<script>
    var cloudMoved = false;
    var cloud2Moved = false;

    $(init);

    function init()
    {
        cloudMove();
        cloud2Move();
        }

    function cloudMove()
    {
        if (!cloudMoved)
        {
            $("#cloud")
                .css("left", $("#cloud").offset().left)
        }

        $("#cloud")
            .animate(
                {
                    left: $("#sky").width()
                },
                cloudMoved ? 180000 : 150000,
                "linear",
                function()
                {
                    $(this)
                        .css("left", -parseInt($(this).css("width")))
                    cloudMoved = true;
                    cloudMove();
                }
            )
    }

    function cloud2Move()
    {
        if (!cloud2Moved)
        {
            $("#cloud2")
                .css("left", $("#cloud2").offset().left)
        }
        $("#cloud2")
            .animate(
                {
                    left: $("#sky").width()
                },
                cloud2Moved ? 120000 : 60000,
                "linear",
                function()
                {
                    $(this)
                        .css("left", -parseInt($(this).css("width")))
                    cloud2Moved = true;
                    cloud2Move();
                }
            )
    }



    </script>

CSS

.custom #sky
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 131px;
    overflow: hidden;
}  


.custom #cloud
{
    position: absolute;
    left: 5%;
    top: 15px;
    z-index: 2;
    width: 120px;
    height: 91px;
        background-repeat: no-repeat;
}

.custom #cloud2
{
    position: absolute;
    left: 25%;
        z-index: 3;
        top: 65px;
    width: 101px;
    height: 66px;
        background-repeat: no-repeat;
}

Answer 1

我相信如果你在一些语句中添加分号，代码就可以了。

<script type="text/javascript">
    var cloudMoved = false;
    var cloud2Moved = false;

    function init() {
        cloudMove();
        cloud2Move();
    }

    function cloudMove() {
        if (!cloudMoved) {
            $("#cloud").css("left", $("#cloud").offset().left);
        }
        $("#cloud").animate({left: $("#sky").width()},
                cloudMoved ? 180000 : 150000,
                "linear",
                function() {
                    $(this).css("left", -parseInt($(this).css("width")));
                    cloudMoved = true;
                    cloudMove();
                });
    }

    function cloud2Move()
    {
        if (!cloud2Moved) {
            $("#cloud2").css("left", $("#cloud2").offset().left);
        }
        $("#cloud2").animate({left: $("#sky").width()},
                cloud2Moved ? 120000 : 60000,
                "linear",
                function() {
                    $(this).css("left", -parseInt($(this).css("width")));
                    cloud2Moved = true;
                    cloud2Move();
                });
    }
    $(document).ready(function(){
        $(init);
    });
</script>

Answer 2

您链接到的页面除了包含jquery库和谷歌分析之外，不包含任何额外的JavaScript代码。这使得很难弄清楚可能出现的问题：）

以下是一些潜在的问题：

您的HTML格式错误

＆lt; \ div id =“sky＆gt;＆lt; \ div id =”cloud“＆gt;

（天空之后没有关闭）

您没有持有jquery调用的document.ready（），因此可能会在页面完成呈现之前尝试运行代码。
你没有任何javascript在页面中加载任何工作（这个有点大）
$（INIT）;是一个参考而不是一个电话。要调用init函数，您需要执行init（）;

Answer 3

没有经过测试，但它接下来应该是jquery.css（）样式;

.animate(
    {
        left: $("#sky").width()
    },

重写

....
.animate(
    {
        left: $("#sky").width() + "px"
    },....

Answer 4

您的cloud div的属性看起来格格不入：

<div id=" cloud"="">

应该是

<div id="cloud">

无法让这个JQuery动画起作用

4 个答案: