下面是一个简单的例子,演示如何使用jQuery停止动画:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stop Animation</title>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<button id="stopButton">停止动画</button>
<script>
$(document).ready(function(){
// 初始动画
$("#myDiv").animate({left: '250px'}, 5000);
// 点击按钮停止动画
$("#stopButton").click(function(){
$("#myDiv").stop();
});
});
</script>
</body>
</html>
在这个例子中,当页面加载完成时,myDiv元素开始执行一个横向移动的动画。点击按钮后,使用stop()方法停止了当前运行的动画。你可以根据需要调整动画的目标元素和属性。
转载请注明出处:http://www.zyzy.cn/article/detail/4614/jQuery