如何通过JQuery设置DIV onload的动画 //动画应该在窗口加载时开始 $（窗口）。加载（函数（）{ $（“div.container:nth child（4）”）.animate（{down:'50px'}，“fast”）； }); //第三个DIV标签在鼠标上方更改背景颜色，在鼠标左侧更改背景颜色 $（“div.container:nth child（3）”）.mouseover（function（）{ $（“div.container:nth child（3）”）.css（“背景色”、“黄色”）； }).mouseleave（函数（）{ $（“div.container:nth child（3）”）.css（“背景色”、“白色”）； }); //第一个DIV标记在单击时展开，在鼠标离开时重置 $（“div.container:n个子（1）”。单击（函数（）{ $（“div.container:nth child（1）”）.css（“宽度”，“250px”）； $（“div.container:nth child（1）”）.css（“高度”，“250px”）； }).mouseleave（函数（）{ $（“div.container:nth child（1）”）.css（“width”，“150px”）； $（“div.container:nth child（1）”）.css（“高度”，“150px”）； });

HTML:

<script>
//Animation should start when the window loads

$(window).load(function(){
    $("div.container :nth-child(4)").animate({down: '50px'}, "fast");
});

//3rd DIV tag changes BG-color on mouseover & changes back on mouse leave

$("div.container :nth-child(3)").mouseover(function(){
    $("div.container :nth-child(3)").css("background-color", "yellow");
}).mouseleave(function(){
    $("div.container :nth-child(3)").css("background-color", "white");
});

//1st DIV tag expands on click & resets on mouse leave

$("div.container :nth-child(1)").click(function(){
    $("div.container :nth-child(1)").css("width", "250px");
    $("div.container :nth-child(1)").css("height", "250px");
}).mouseleave(function(){
    $("div.container :nth-child(1)").css("width", "150px");
    $("div.container :nth-child(1)").css("height", "150px");
});
</script>

我已尝试使用$（window）.load和$（document）.ready，但它不起作用。 我希望在页面完全加载时启动动画。

<div class="container">
  <div class="border box"></div>
  <div class="border box"></div>
  <div class="border box"></div>
  <div class="border box"></div>
</div>

.盒子{
宽度：100px；
高度：100px；
边框：2倍纯红；
浮动：左；
显示：块；
}
//动画应该在窗口加载时开始
$（文档）.ready（函数（）{
$（“div.container:nth child（4）”）.animate（{height:+=50px}，“slow”）；
//第三个DIV标签在鼠标上方更改背景颜色，在鼠标左侧更改背景颜色
$（“div.container:nth child（3）”）.mouseover（function（）{
$（“div.container:nth child（3）”）.css（“背景色”、“黄色”）；
}).mouseleave（函数（）{
$（“div.container:nth child（3）”）.css（“背景色”、“白色”）；
});
//第一个DIV标记在单击时展开，在鼠标离开时重置
$（“div.container:n个子（1）”。单击（函数（）{
$（“div.container:nth child（1）”）.css（“宽度”，“250px”）；
$（“div.container:nth child（1）”）.css（“高度”，“250px”）；
}).on（'mouseleave'，function（）{
$（“div.container:nth child（1）”）.css（“width”，“150px”）；
$（“div.container:nth child（1）”）.css（“高度”，“150px”）；
});
});

向下

？？？这不是一个有效的css属性。我也尝试了其他方面，但它不起作用。您的所有代码都需要在

$（窗口）中。load（）

或

$（文档）。ready（）

-否则，您的单击、mousleave、mouseover等将不起作用。

down

是无效属性。您可以改为使用

bottom

。并进行其他注释中提到的其他修复。您是否使用jquery UI？

 <script
      src="https://code.jquery.com/jquery-3.2.1.js"
      integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
      crossorigin="anonymous"></script>

    <style>
        .box{
            width:100px;
            height: 100px;
            border:2px solid red;
            float: left;
            display: block;

        }

    </style>
    <div class="container">
      <div class="border box"></div>
      <div class="border box"></div>
      <div class="border box"></div>
      <div class="border box"></div>
    </div>

    <script>
    //Animation should start when the window loads
    $(document).ready(function(){
        $("div.container :nth-child(4)").animate({height: "+=50px"}, "slow");

    //3rd DIV tag changes BG-color on mouseover & changes back on mouse leave

    $("div.container :nth-child(3)").mouseover(function(){
        $("div.container :nth-child(3)").css("background-color", "yellow");
    }).mouseleave(function(){
        $("div.container :nth-child(3)").css("background-color", "white");
    });

    //1st DIV tag expands on click & resets on mouse leave

    $("div.container :nth-child(1)").click(function(){
        $("div.container :nth-child(1)").css("width", "250px");
        $("div.container :nth-child(1)").css("height", "250px");
    }).on('mouseleave',function(){
        $("div.container :nth-child(1)").css("width", "150px");
        $("div.container :nth-child(1)").css("height", "150px");
    });

    });
    </script>