Fatal编程技术网

动画函数JQuery

jquery

动画函数JQuery,jquery,slider,Jquery,Slider,我真的被这件事弄得头晕目眩。我有以下代码： <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> &

我真的被这件事弄得头晕目眩。我有以下代码：

<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>
好的，当页面加载脚本时，垂直向下滑动，水平向下滑动后记。这是在div标签中

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

我想我可以做一个新的div，但那当然不行。我试图做这样的东西，但我也需要样式的“左盒”，但有一些错误，我猜。有些事我误解了

<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>
如果我理解正确，您希望绿色框垂直和水平展开，蓝色框水平展开

下面是一个正在工作的JSFIDLE，其中包含一个解决方案：

您的代码中包含以下内容：

<div class="banner" id="box" id="leftbox">
谢谢你的回答。弗雷特，这正是我想要的。唯一的问题是我想让蓝色方块从上到下移动。在这种情况下，只需将
。banner blue
的css更改为
宽度：[您的宽度]
，删除
高度：100px
行，并将动画从
宽度更改为
高度。当我在我的程序中接管它时，首先是蓝色的加载，然后是绿色的后记。你能把你当前的javascript代码添加到你文章的末尾吗？这样我就能看到发生了什么？我现在已经添加了代码。顺便说一下，我还没有把代码放在头上：-/

<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>



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

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



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



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

        });