摘要：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>