jQuery動畫 1.hide([speed,[easing],[fn]]) 方法:隱藏顯示的元素 參數： ①speed[,fn] speed:三種預定速度之一的字元串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000) fn:在動畫完成時執行的函數，每個 ...
jQuery動畫
1.hide([speed,[easing],[fn]])
方法:隱藏顯示的元素
參數：
①speed[,fn]
speed:三種預定速度之一的字元串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
fn:在動畫完成時執行的函數，每個元素執行一次。
②[speed],[easing],[fn]
speed:三種預定速度之一的字元串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing:(Optional) 用來指定切換效果，預設是"swing"，可用參數"linear"
fn:在動畫完成時執行的函數，每個元素執行一次。
2.show([speed,[easing],[fn]])
方法：顯示隱藏的匹配元素。
參數：
①speed[,fn]
speed:三種預定速度之一的字元串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
fn:在動畫完成時執行的函數，每個元素執行一次。
②[speed],[easing],[fn]
speed:三種預定速度之一的字元串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing:(Optional) 用來指定切換效果，預設是"swing"，可用參數"linear"
fn:在動畫完成時執行的函數，每個元素執行一次。
註意：參數可以是一個number類型,也可以是字元串類型
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 400px; } img{ width:90px ; height:90px; vertical-align: top; } </style> <script src="jquery-1.12.2.js"></script> <script> // $(function () { // $("#btn1").click(function () { // //回調函數 // $("div>img").hide(1000,function () { // alert("結束了"); // }); // }); // // $("#btn2").click(function () { // //回調函數 // $("div>img").show(1000,function () { // alert("結束了===="); // }); // }); // }); </script> <script> $(function () { $("#btn1").click(function () { //獲取div,最後一個圖片,隱藏 $("div>img").last("img").hide(800,function () { //arguments.callee相當於遞歸 $(this).prev().hide(800,arguments.callee); }); }); //顯示 $("#btn2").click(function () { $("div>img").first("img").show(800,function () { //arguments.callee相當於遞歸 $(this).next().show(800,arguments.callee); }); }); }); </script> </head> <body> <input type="button" value="隱藏動畫" id="btn1"/> <input type="button" value="顯示動畫" id="btn2"/> <div> <img src="images/1.jpg"/> <img src="images/2.jpg"/> <img src="images/3.jpg"/> <img src="images/4.jpg"/> </div> </body> </html>
動畫方法:animate方法
第一個參數:鍵值對,(數值的屬性可以改,顏色不能改)
第二個參數:動畫的時間
第三個參數:回調函數
例如：
$("#im").animate({"left":"10px","top":"500px","width": "50px", "height": "50px"},2000,function () {
$("#im").animate({"left":"+=505px","top":"-=400px","width":"+=200px","height":"+=200px"},1000);
});
停止動畫效果:stop()方法
例如：
$(".wrap>ul>li").mouseover(function () {
$(this).children("ul").stop().show(500);// 顯示 ul
});
$(".wrap>ul>li").mouseout(function () {
$(this).children("ul").stop().hide(500);// 顯示 ul
});
其他動畫方法
1.$("div").slideUp(1000);// 滑入
2.$("div").slideDown(1000);// 滑出
3.$("div").slideToggle(1000);// 切換滑入滑出
4.$("div").fadeIn(1000);// 淡入
5.$("div").fadeOut(1000);// 淡出
6.$("div").fadeToggle(1000);// 切換淡入淡出
7.
// 可以設置透明度,參數 1: 時間 , 參數 2: 到達透明度
$( “div ”).fadeTo(1000,0.3);// 一個參數,常用
// 參數 1: 沒有時間 , 參數 2: 到達透明度
// 和 css("opacity",0.1);
$("div").fadeTo(0,0.1);// 一個參數
特此聲明：如需轉載請註明出處，如有疑問請及時提出以便於改正，如有侵權，聯繫刪除，謝謝
