摘要：第一章 jQuery顯示/隐藏 hide() 隐藏顯示的元素 書寫格式：hide([speed][sesing] [fn]) show() 顯示隐藏的元素 書寫格式：show([speed][sesing] [fn]) speed:顯示過程的速度 速
第一章 jQuery顯示/隐藏
hide() 隐藏顯示的元素
書寫格式：hide([speed][sesing] [fn])
show() 顯示隐藏的元素
書寫格式：show([speed][sesing] [fn])
speed:顯示過程的速度 速度是毫秒值
sesing:指定切換的效果
fn:動畫完成時執行的一個函數html>
jQuery顯示/隐藏
div,p{width: 200px;height: 200px;background: red;margin: 10px 0;color: #fff;}
$(document).ready(function(){
$('#bt1').click(function(){
$('p').hide('2000')
})
$('#bt2').click(function(){
$('p').show('2000')
})
})
點選隐藏
點選顯示
紅玫瑰與白玫瑰
朱砂痣與白月光
第二章 jQuery的滑動
jQuery的滑動是通過高度的變化(向某個方向增大或者縮小)來動态的顯示所比對的元素
slideDown([speed] [fn])通過高度的變化，向下增大的動态效果 下滑效果
speed:下滑顯示過程的速度 英文值或者毫秒
fn:動畫完成時執行是函數html>
jQuery滑動
$(document).ready(function(){
$('.p1').hide()
$('.bt1').click(function(){
$('.p1').slideDown(777)
})
$('.bt2').click(function(){
$('.p2').slideUp(777)
})
$('.bt3').click(function(){
$('.p3').slideToggle(777)
})
})
下滑
With this hand
I'll left from sorrows
Your cup will never empty
上滑
You'll be fine
Don't worry
you will be fine
切換
For I will be your wine
With this candle
I'll ligth your darkness
slideUp([speed] [fn]) 通過高度的變化，向上減小的動态效果 上滑效果
speed:上滑顯示過程的速度 英文值或者毫秒
fn:動畫完成時執行是函數
slideToggle([speed] [fn])通過高度的變化來切換元素的可見性
speed:上滑隐藏/下滑顯示 過程的速度 英文值或者毫秒
fn:動畫完成時執行是函數
第三章 jQuery淡入淡出
jQuery是通過控制不透明度的變化來控制比對到的元素的淡入淡出效果
fadeIn([speed] [fn]) 通過不透明度的變化來實作比對到元素的淡入的效果;
fadeOut([speed] [fn])通過不透明度的變化來實作比對到元素的淡出的效果;
fadeToggle([speed] [fn]) 通過不透明度的變化來開關所有比對元素的淡入淡出效果;
fadeTo([speed] opacity [fn]) 把所有比對到元素的不透明度以漸進發方式調整到指定的不透明度;
// speed:規定效果的時長
fn:動畫完成時執行是函數
opacity：fadeTo()方法中必須參數，控制淡入淡出的效果的不透明度(值介于0與1之間)
jQuery淡入淡出
.main{height: 240px;width: 200px;margin-right: 20px;float: left;}
.box1{height: 200px;width: 200px;background: yellowgreen;}
.box2{height: 200px;width: 200px;background: pink;}
.box3{height: 200px;width: 200px;background: blue;}
.box4{height: 200px;width: 200px;background: red;}
button{height: 40px;width: 200px;border:none;}
$(document).ready(function(){
$('.box1').hide()
$('.bt1').click(function(){
$('.box1').fadeIn(777)
})
$('.bt2').click(function(){
$('.box2').fadeOut(777)
})
$('.bt3').click(function(){
$('.box3').fadeToggle(777)
})
$('.bt4').click(function(){
$('.box4').fadeTo(777,0.5)
})
})
淡入
淡出
切換
切換
第四章 自定義動畫
jQuery中我們使用 animate()方法建立自定義的動畫
文法:$(selector).animate({params},speed,fn);
必需的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 fn是動畫完成後所執行的函數html>
jQuery自定義動畫
div{width: 100px;height: 100px;background: yellowgreen;position: absolute;}
$(document).ready(function(){
$('#bt1').click(function(){
$('em').animate({fontSize:'37px'},1777)
})
$('#bt2').click(function(){
$('div').animate({
left:'377',
opacity:'0.77',
width:'toggle',
height:'toggle'
},1777)
})
})
點選字型放大
可口可樂
點選移動div
停止動畫：
stop() 方法用于停止動畫或效果，在它們完成之前； 該方法适用于所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫
文法:
$(selector).stop(stopAll,goToEnd)
可選的參數 stopAll 規定是否應該清除動畫隊列。預設是 false 僅停止活動的動畫，允許任何排入隊列的動畫向後執行
可選的參數 goToEnd 規定是否立即完成目前動畫。預設是 false
預設情況下 stop() 會清除在被選元素上指定的目前動畫html>
.box1{position: absolute;background-color: pink;}
$(document).ready(function(){
$('#right').click(function(){
$('.box1').animate({
left:'600px',
fontSize:'37px',
fontWeight:'bold'
},2777)
})
$('#stop').click(function(){
$('.box1').stop()
})
})
右移
停止
XXXTENTACION
批改老師：韋小寶批改時間：2019-01-23 11:42:09
老師總結：寫的很棒 總結注釋的都很清楚 jQuery中可以實作很多的動畫效果 課後沒事多練習練習 繼續加油吧