小白學前端------------jQuery動畫
阿新 • • 發佈:2018-12-19
一.jQuery動畫
1.1 基本效果
引數詳解
speed:三種預定速度之一的字串("slow","normal",or"fast")或表示動畫時長的毫秒數值(如:1000) easing : (Optional) 用來指定切換效果,預設是"swing",可用引數"linear" fn : 在動畫完成時執行的函式,每個元素執行一次。
hide(speed,fn) 隱藏 show(speed,fn) 顯示 toggle(speed,fn) 切換 寬高(height/width padding),透明度(opacity)變化 最後變為display:none/block
1.2 滑動效果
slideDown([s],[e],[fn]) 通過高度,上下padding變化(向下增大)來動態地顯示所有匹配的元素,隱藏
slideUp([s,[e],[fn]]) 通過高度,上下padding變化(向上減小)來動態地隱藏所有匹配的元素,顯示
slideToggle([s],[e],[fn]) 通過高度變化來切換所有匹配元素的可見性,切換
只有高度和padding變化
1.3淡入淡出效果
fadeIn([s],[e],[fn]) 通過不透明度的變化來實現所有匹配元素的淡入效果 fadeOut([s],[e],[fn]) 通過不透明度的變化來實現所有匹配元素的淡出效果 fadeToggle([s,[e],[fn]]) 通過不透明度的變化來開關所有匹配元素的淡入和淡出效果 fadeTo([s],opacity,[e],[fn])把所有匹配元素的不透明度以漸進方式調整到指定的不透明度,opacity必須寫 只有opacity變化
1.4自定義動畫
animate(p,[s],[e],[fn])
引數詳解
params: 一組包含作為動畫屬性和終值的樣式屬性和及其值的物件
speed: 三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如:1000)
easing: 要使用的擦除效果的名稱(需要外掛支援).預設jQuery提供"linear" 和 "swing".一般不設定
fn: 在動畫完成時執行的函式,每個元素執行一次。
1.5 動畫控制
stop([c],[j]) 停止動畫 停止所有在指定元素上正在執行的動畫 delay(d,[q]) 延遲等待 設定一個延時來推遲執行佇列中之後的專案 finish([queue]) 瞬間完成動畫 停止當前正在執行的動畫,刪除所有排隊的動畫,並完成匹配元素所有的動畫 is(':animated') 判斷是否執行動畫 返回布林值 if($('#box').is(':animated')){ return false; }
1.6 jQuery外掛
1.6.1select2 下拉框搜尋外掛
1.6.2 datetimepicker 時間日期外掛
-
用法
//設定語言 $.datetimepicker.setLocale('zh'); //呼叫外掛 $(dom).datetimepicker({ datepicker:, timepicker:, format:"Y-m-d H:i", value:, .... })
1.6.3 fullpage 全屏滾動外掛
-
用法
<!--HTML部分--> <div id="fullpage> <div class="section"></div> <div class="section"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> <div class="section"></div> <div class="section"></div> </div> 自定義的導航 解除安裝包裹元素的外面 <!--JS部分--> <script> $("#fullpage").fullpage({ navigation: true, sectionsColor: [] ..... }) </script>
1.6.4 lazyload 圖片懶載入
1.6.5 layer 彈窗外掛
-
用法
layer.alert() layer.confirm() layer.msg() layer.load() layer.tips() layer.colse() layer.open({ type: , title: , content: .... }) ...