jQuery 动画与停止动画效果实例详解
本次攻略将会重点讲解jQuery中动画效果的运用与实现，同时还会包括如何停止动画效果。
- jQuery 动画的基本使用方法
我们知道，jQuery提供了许多丰富的动画方法，如animate()、fadeIn()、fadeOut()、slideDown()、slideUp()等等，这里我们以animate()为例进行详细讲解。
animate()的基本语法如下：
$(selector).animate({params},speed,callback);
其中，selector表示选择器，params表示CSS的属性和值，speed表示动画时长，callback表示动画执行完毕之后所执行的函数。
下面是一个具体的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 动画效果实例</title>
<style>
#box {
background-color: pink;
width: 200px;
height: 200px;
position: relative;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").animate({left: '250px', opacity: '0.5'}, "slow");
});
});
</script>
</head>
<body>
<div id="box"></div>
<button>向右移动</button>
</body>
</html>
上面的代码实现了点击按钮使一个方形的盒子向右移动的功能，并且过程中缓慢变成半透明。
- jQuery 停止动画的方法
jQuery中，我们可以通过stop()方法来停止正在进行的动画效果，其语法如下：
$(selector).stop(stopAll,goToEnd);
其中，stopAll表示是否停止所有的动画效果（默认值为false），goToEnd表示是否立即跳转到动画效果的结束状态（默认值为false）。
下面是一个具体的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 停止动画效果实例</title>
<style>
#box {
background-color: pink;
width: 200px;
height: 200px;
position: relative;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").animate({left: '250px', opacity: '0.5'}, 5000);
});
$("button.stop").click(function(){
$("#box").stop();
});
});
</script>
</head>
<body>
<div id="box"></div>
<button>开始移动</button>
<button class="stop">停止移动</button>
</body>
</html>
上面的代码实现了点击第一个按钮使一个方形的盒子向右移动的功能，并且过程中缓慢变成半透明，再点击第二个按钮停止移动。
以上就是关于jQuery动画与停止动画效果的详细讲解，希望对您有所帮助。
The End
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)