Question

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

HTML：

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

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

Answer 1

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

如何通过JQuery动画DIV onload

1 个答案: