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>

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: