abstract：jqery的動畫效果一. jqery的顯示與隱藏hide()隱藏顯示的元素書寫格式：hide([speed][sesing][function])show()顯示隱藏的元素書寫格式：hide([show][sesing][function])speed:隱藏過程的速度(值：毫秒值)sesing:指定切換的效果function:動畫完成時執行的一個函數ex; &nb
jqery的動畫效果
一. jqery的顯示與隱藏
hide()隱藏顯示的元素
書寫格式：hide([speed][sesing][function])
show()顯示隱藏的元素
書寫格式：hide([show][sesing][function])
speed:隱藏過程的速度(值：毫秒值)
sesing:指定切換的效果
function:動畫完成時執行的一個函數
ex;
$(document).ready(function(){
$('#bt1').click(function(){
$('p').hide(1500)
})
$('#bt2').click(function(){
$('p').show(1500)
})
})
二 .jquery的滑動
jquery的滑動是通過高度的變化（向某個方向增大或者縮小）來動態顯示所匹配的元素
slideDown（[speed][fn]）通過高度的變化，向下增大動態效果，下滑效果（值：slow,fast,毫秒值）
speed:下滑顯示過程的速度 英文值或者毫秒
fn:動畫完成時執行是函數
slideUp([speed][fn])通過高度的變化，想上減小的動態效果，上滑效果
speed:上滑顯示過程的速度 英文值或者毫秒
fn:動畫完成時執行是函數
slideToggle([speed][fn])過過高度的變化來切換元素的可見性
speed:上滑隱藏/下滑顯示 過程的速度 英文值或者毫秒
fn:動畫完成時執行是函數
ex;
$(document).ready(function(){
$('.p1').hide()
$('.bt1').click(function(){
$('.p1').slideDown()
})
$('.bt2').click(function(){
$('.p2').slideUp()
})
$('.bt3').click(function(){
$('.p3').slideToggle(1000)
})
})
三 .jquery-淡入淡出
jquery是通過控制不透明度的變化來控制匹配到的元素的淡入淡出效果
fadeIn([speed][fn])通過不透明度的變化來實現匹配到元素的淡入效果
fadeOut([speed][fn])通過不透明度的變化來實現匹配到元素的淡出的效果
fadeToggle([speed][fn])通過不透明度的變化來開關所有匹配元素的淡入淡出效果
fadeTo([speed]opacity[fn])把所有匹配到元素的不透明度以漸進方式調整到指定的不透明度
speed:規定效果時長
fn:動畫完成時執行的函數
opacity:fadeTo()方法中必須參數，控制淡入淡出的效果的不透明度（值介於0與1之間）
ex;
$(document).ready(function(){
$('.box1').hide()
$('.bt1').click(function(){
$('.box1').fadeIn(3000)
})
$('.bt2').click(function(){
$('.box2').fadeOut()
})
$('.bt3').click(function(){
$('.box3').fadeToggle(1500)
})
$('.bt4').click(function(){
$('.box4').fadeTo(1000,0.3)//必須要兩個值
})
})
四 .jquery-自定義動畫
jquery中我們使用animate()方法創建自定義的動畫
語法:$(selector).animate({params},speed,fn);
必須的 params 參數定義形成動畫的css屬性
可選的speed參數規定效果的時長，它可以取以下值:slow,fast或毫秒值
可選的fn是動畫完成後所執行的函數
stop()方法用於停止動畫或效果，在他們完成前，該方法用於所有jquery效果函數，他包含滑動，淡入淡出和自定義動畫
語法：$(selector).stop(stopAll,goToend)
可選的參數stopAll規定是否應該清除動畫隊列，默認是false僅停止活動的動畫，允許任何排入排列的動畫后執行
可選的參數goToEnd規定是否完成當前動畫，默認是flase
默認情況下stop()會清除再被選元素上指定的當前動畫
ex;$(document).ready(function(){
$('.bt1').click(function(){
$('p').animate({fontSize: '400px'},1500)
})
同時操作多個css屬性.
使用預定義的值show,hide,toggle
$('.bt2').click(function(){
$('div').animate({
left: '400px',//如果想對元素位置進行一個位移，那麼我們需要給當前元素設置一個position ，例如：position:absolute;
opacity: '0.3',
height: '500px',
width: '500px'
width:'toggle'
},1500)
})
})
注:font-size,要使用駝峰寫法fontSize
五 .jquery-停止動畫
stop()方法用於停止動畫或效果，在他們完成前，該方法適用於所有jquery效果函數，包括滑動，淡入淡出和自定義動畫
語法：
$(seleector).stop(stopAll,goToEnd)
可選的參數stopAll規定是否應該清除動畫隊列，默認是false僅停止活動的動畫，允許任何排入隊列的動畫向後執行
可選的參數goToEnd規定是否立即完成當前的動畫，默認是false
默認情況下stop()會清除在被選元素上指定的當前動畫
ex;
$(document).ready(function(){
$('#right').click(function(){
$('.box1').animate({left : '+500px'},3000)
$('.box1').animate({fontSize:'300px'},500)
})
$('#stop').click(function(){
$('.box1').stop(true)
})
})
Correcting teacher：西门大官人Correction time：2019-04-22 10:00:10
Teacher's summary：总结的很好，写的很认真。最好在js代码后面加上分号。规范些
