本章动画总结_php.cn手记

abstract：jquery的滑动slidedown：下滑变大， slidedown([speed][fn]) ：[speed]为下滑的速度，[fn]动画完成时执行的函数 ,其中参数可选$('p').slideDown(1000)slideUp:上滑变小 ,参数可选$('p').slideUp(1000)slideToggle:可以上滑与下滑切换$('p'

jquery的滑动

slidedown：下滑变大， slidedown([speed][fn]) ：[speed]为下滑的速度，[fn]动画完成时执行的函数 ,其中参数可选

$('p').slideDown(1000)

slideUp:上滑变小 ,参数可选

$('p').slideUp(1000)

slideToggle:可以上滑与下滑切换

$('p').slideToggle(1000)

jquery的淡入与淡出

fadeIn：淡入效果，可以通过值的设置淡入时间

fadeOut：淡出效果，可以通过值的设置淡入时间

fadeTo：淡出到指定值，内部参数有两个必须给，分别为规定的时长和淡出透明度设置值，其中透明度设置值在0-1

<script type="text/javascript">
$(document).ready(function(){
	$('.box1').hide()
	$('.btn1').click(function(){
	$('.box1').fadeIn(2000)	})
	$('.btn2').click(function(){
	$('.box1').fadeOut(2000)
	})
	$('.btn4').click(function(){
	$('.box1').fadeTo(1000,0.3)
	})
})
	</script>

jquery的显示与隐藏

hide():用来隐藏显示的元素

书写格式：hide([speed][switch][fn]) speed为隐藏过程的速度，速度单位是毫秒；switch是切换的效果值；fn是动画完成时执行的函数

show()：用来显示隐藏的元素书写格式：show([speed][switch][fn])

<script type="text/javascript">
	$(document).ready(function(){
		$('button:eq(0)').click(function(){
			$('p,div').hide(1500 )
		})
		$('button:eq(1)').click(function(){
			$('p,div').show(100 )
	})
	})
</script>

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery的自定义动画</title>
<style>
div{background:pink;position: absolute;}
/*当要发生发生位移时，要定义元素的位置属性*/
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js">
</script>
</head>
<body>
<!-- $().stop(stopall,gotoend) :两个参数均是可选参数，stopall：规定是否应该清楚动画队列，gotoend规定是否立即完成当前动画，默认值均为false-->
<script type="text/javascript">
$(document).ready(function(){
$('button:first').click(function(){
$('div').animate({left:'+400px'},3000)
$('div').animate({fontSize:'30px'},300)
})
$('button:last').click(function(){
// $('div').stop()
// //停止当前活动的效果，但不能停止后续队列的效果，stop相等于（false,false）
// $('div').stop(true)
// 停止当前所有的动画或效果，stop相等于（true,true）
$('div').stop(false,true)
//清除后续队列并立即完成当前效果
})

})
</script>

本章动画总结

Popular Entries