我对 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);
});
});
如何在不使用按钮的情况下触发动画？谢谢。
最佳答案
您需要的功能； $(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>关于jquery - 在页面加载时自动设置矩形宽度的动画(无需按下按钮)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47252976/