动画函数 JQuery

Question

我真的为此伤脑筋。我有以下代码：

<html>

<head>
<link rel="stylesheet" type="text/css" href="bannerTest.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>


</head>

<body>
    <div class="banner" id="box">

        <script>
        $(document).ready(function(){
            setTimeout(function () {
                $("#box").animate({height: "300px"});
                $("#box").animate({width: "100%"});
            }, 100); 
        });
        </script>
    </div>
</body>

</html>

CSS

.banner {
background:#98bf21;
height:100px;
width:100px;
margin:6px;
}

好的，所以当页面加载完毕后，脚本垂直向下滑动，然后水平滑动。这是在 div 标签内。

所以如果我现在想要一个也可以向下滑动的蓝色方块，我应该怎么做？

我想我可以制作一个新的 div，但那当然行不通。我试着做这样的东西，但我还需要设置 "leftbox" 的样式，但我猜有些地方不对劲。我误解了。

<div class="banner" id="box" id="leftbox">

    <script>
    $(document).ready(function(){
        setTimeout(function () {
            $("#box").animate({height: "300px"});
            $("#box").animate({width: "100%"});
            $("#leftbox").animate({width: "10%"});
        }, 100); // the 1000 is the delay in milliseconds
    });
    </script>
</div>

希望有人能帮助我吗？

最好的问候疯狂

编辑代码：

<html>

<head>
<link rel="stylesheet" type="text/css" href="bannerTest.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>

<div class="banner">
    <div class="banner-blue">
        <script>
            $(document).ready(function()
            {
            $(".banner").animate({height: "300px"}, 1000);
            $(".banner").animate({width: "100%"}, 1000);

                $(".banner-blue").animate({height: "300px"}, 1000);

            });
        </script>
    </div>
</div>

</body>
</html>

CSS:

.banner {
    background:#98bf21;
    height:300px;
    width:300px;
    margin:6px;
}

.banner-blue {
    background:#0000ff;
    position:absolute;
    width: 300px;
}

Answer 1

如果我没理解错的话，您希望绿色框在垂直和水平方向上扩展，而蓝色框在水平方向上扩展。

这是一个有效的 JSFiddle，其中包含一个解决方案： http://jsfiddle.net/ruLtkc40/1/

在您的代码中有以下内容：

<div class="banner" id="box" id="leftbox">

关于 ID 的两件事：

每个元素只能有一个
ID 必须是唯一的，因此不能有两个 ID 为 box

在 JSFiddle 中，我还在选择器中使用了 classes 而不是 ID，因为它可以使您的元素保持整洁，并且您不需要同时声明 ID 和一个class.

我还建议您将所有标签放在页面顶部而不是内部元素，以保持页面井井有条。

让我知道这是否是您想要实现的目标。

更新

我已将 banner-blue 动画放在回调中，这意味着它只会在 banner 动画完成后开始：

$(document).ready(function()
        {
        $(".banner").animate({height: "300px"}, 1000);
        $(".banner").animate({width: "100%"}, 1000, function()
           {
            $(".banner-blue").animate({height: "300px"}, 1000);
           });

        });

动画函数 JQuery

animation functions JQuery

jquery

slider