jquery自定义动画

abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery停止动画</title> <script type="text/javascript" src="j
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery停止动画</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
div{
height:200px;
margin:100px,0px;
}
.box{
width:100px;
height:100px;
background: blue;
position: absolute;
}

.box2{
width:100px;
height:100px;
background:pink;
position: absolute;
}


</style>
</head>
<body>


<script type="text/javascript">
$(document).ready(function(){
$('#right').click(function(){
$('.box').animate({left:'500px',fontSize:'40px'},3000)
})

$('#stop').click(function(){
$('.box').stop(false,true)
})

$('#right_1').click(function(){
$('.box2').animate({left:'+500px'},3000)
$('.box2').animate({fontSize:'40px'},600)
})

$('#stop_1').click(function(){
$('.box2').stop(false,true)
})
})

</script>
<div>
		<button id="right">点击右移</button>
		<div class="box">中文网</div>
		<button id="stop">停止</button>
		</div>
		<div>
		<button id="right_1">点击右移</button>
		<div class="box2">中文网</div>
		<button id="stop_1">停止</button>
		</div
 
</body>
</html>

hide()   隐藏显示的元素
基本格式: hide([speed][seeing][fn])
show()   显示隐藏的元素
基本格式: show([speed][seeing][fn])
speed:   隐藏/显示过程的速度，速度是毫秒
seeing:  指定切换效果
fn:      动画完成时执行的一个函数

jauery滑动:
jquery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素
slideDown([speed][fn])    	下滑效果 通过高度的变化，向下增大的动态效果
speed  			下滑显示过程的速度 英文值(fast/slow)或者毫秒
fn 				动画完成时执行是函数

slideUp([speed][fn]) 		上滑效果 通过高度的变化，向上减小的动态效果
speed  			上滑显示过程的速度 英文值(fast/slow)或者毫秒
fn 				动画完成时执行是函数

slideToggle([speed][fn])   	切换效果 通过高度的变化来切换元素的可见性
speed   			上滑隐藏/下滑显示 过程的速度 英文值(fast/slow)或者毫秒
fn 				动画完成时执行是函数

jquery淡入淡出:
query是通过控制不透明度的变化来控制匹配到的元素的淡入淡出效果

fadeIn([speed][fn]) 			通过不透明的变化来实现匹配到元素的淡入效果
fadeOut([speed][fn]) 			通过不透明的变化来实现匹配到元素的淡出效果
fadeToggle([speed][fn])  		通过不透明的变化来开关所有匹配元素的淡入淡出效果
fadeTo([speed] opacity [fn])    把所有匹配到元素的不透明度以渐进发方式调整到指定的不透明度
opacity 			fadeTo()方法中必须参数，控制淡入淡出的效果的不透明度(值介于0-1之间)
speed 				规定效果的时长
fn 				动画完成时所执行的函数

jquery自定义动画效果:
 jquery中我们使用animate()方法创建自定义动画
 语法:
 $(selector).aniamte({params},speed,fn)

 params 		必需的 参数定义形成动画的CSS属性
 speed 		可选的 参数规定效果的时长，它可以取以下值:"slow","fast"或者毫秒值
 fn  		可选的 动画完成后所执行的函数
 
jquery停止动画:
 stop() 方法用于停止动画或效果，在她们完成之前，该方法适用于所有jquery效果函数，
	 包括滑动，淡入淡出和自定义动画
 语法: $(selector).stop(stopAll,goToEnd)
 stopAll   可选参数 规定是否应该清楚动画队列，默认是false 仅停止活动的动画，
	   允许任何排入队列的动画向后执行
 goToEnd   可选参数 规定是否立即完成当前动画  默认是false
           默认情况下  stop() 会清除在被选元素上指定的当前动画
Correcting teacher：天蓬老师Correction time：2018-11-28 17:43:12
Teacher's summary：很多人爱上jQuery, 就是看上了他对动画的效果的简洁处理方式, 希望你好好学
jquery自定义动画

Popular Entries
