在页面加载时自动设置矩形宽度的动画（无需按下按钮）

Question

我对 jquery 很陌生。我正在尝试创建一个简单的宽度动画。如果我按下一个按钮，我可以正常工作。但是，我想要的是动画在页面加载后立即自动发生。我一直在寻找一个例子，但你认为我能找到一个不使用按钮的例子吗...

这是我目前的情况：

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Anim</title>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="anim.js"></script>
</head>
<body>
  <button id="button1">Grow</button>
  <div style="background:green; 
              height:250px; width:1px;
              position:absolute;">

  </div>
</body>
</html>

anim.js

$(document).ready(function() {

  $("#button1").click(function() {
    $("div").animate({height: '250px',width: '+=300px'},4000);
  });

});

如何在不使用按钮的情况下触发动画？谢谢

Answer 1

您需要的功能； $(document).ready()打开页面时使用该函数

带上jQuery这样的代码；

$(document).ready(function() {
    $("div").animate({
        height: '250px',
        width: '+=300px'
    }, 4000);
});

您可以从 html 代码中删除按钮；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Anim</title>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="anim.js"></script>
    </head>
    <body>
        <div style="background:green;height:250px;width:1px;position:absolute;"></div>
    </body>
</html>

$(document).ready(function() {
    $("div").animate({
        height: '250px',
        width: '+=300px'
    }, 4000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background:green;height:250px;width:1px;position:absolute;"></div>

在页面加载时自动设置矩形宽度的动画（无需按下按钮）

Animate width of rectangle automatically at page load (no button press)

html

jquery

animation

jquery-animate