亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

本章動(dòng)畫總結(jié)

??? 2018-10-29 13:29:10 222
????:jquery的滑動(dòng)slidedown:下滑變大, slidedown([speed][fn]) :[speed]為下滑的速度,[fn]動(dòng)畫完成時(shí)執(zhí)行的函數(shù) ,其中參數(shù)可選$('p').slideDown(1000)slideUp:上滑變小 ,參數(shù)可選$('p').slideUp(1000)slideToggle:可以上滑與下滑切換$('p'

jquery的滑動(dòng)

slidedown:下滑變大, slidedown([speed][fn]) :[speed]為下滑的速度,[fn]動(dòng)畫完成時(shí)執(zhí)行的函數(shù) ,其中參數(shù)可選

$('p').slideDown(1000)

slideUp:上滑變小 ,參數(shù)可選

$('p').slideUp(1000)

slideToggle:可以上滑與下滑切換

$('p').slideToggle(1000)

 jquery的淡入與淡出

fadeIn:淡入效果,可以通過值的設(shè)置淡入時(shí)間

fadeOut:淡出效果,可以通過值的設(shè)置淡入時(shí)間

fadeTo:淡出到指定值,內(nèi)部參數(shù)有兩個(gè)必須給,分別為規(guī)定的時(shí)長(zhǎng)和淡出透明度設(shè)置值,其中透明度設(shè)置值在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是動(dòng)畫完成時(shí)執(zhí)行的函數(shù)

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的自定義動(dòng)畫</title>
<style>
div{background:pink;position: absolute;}
/*當(dāng)要發(fā)生發(fā)生位移時(shí),要定義元素的位置屬性*/
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js">
</script>
</head>
<body>
<!-- $().stop(stopall,gotoend) :兩個(gè)參數(shù)均是可選參數(shù),stopall:規(guī)定是否應(yīng)該清楚動(dòng)畫隊(duì)列,gotoend規(guī)定是否立即完成當(dāng)前動(dòng)畫,默認(rèn)值均為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()
// //停止當(dāng)前活動(dòng)的效果,但不能停止后續(xù)隊(duì)列的效果,stop相等于(false,false)
// $('div').stop(true)
// 停止當(dāng)前所有的動(dòng)畫或效果,stop相等于(true,true)
$('div').stop(false,true)
//清除后續(xù)隊(duì)列并立即完成當(dāng)前效果
})

})
</script>


??? ??

?? ??