標籤：top speed 0ms json2 上拉 ssh nim wrap color
jQuery提供的一組網頁中常見的動畫效果，這些動畫是標準的、有規律的效果；同時還提供給我們了自訂動畫的功能。
顯示動畫方式一：
$("div").show();
解釋：無參數，表示讓指定的元素直接顯示出來。其實這個方法的底層就是通過display: block;實現的。
方式二：
$(‘div‘).show(3000);
解釋：通過控制元素的寬高、透明度、display屬性，逐漸顯示，2秒後顯示完畢。
方式三：
$("div").show("slow");
參數可以是：
slow 慢：600ms
normal 正常：400ms
fast 快：200ms
解釋：和方式二類似，也是通過控制元素的寬高、透明度、display屬性，逐漸顯示。
方式四：
//show(毫秒值，回呼函數; $("div").show(5000,function () { alert("動畫執行完畢！"); });
解釋：動畫執行完後，立即執行回呼函數。
總結：
上面的四種方式幾乎一致：參數可以有兩個，第一個是動畫的執行時間長度，第二個是動畫結束後執行的回呼函數。
隱藏動畫方式參照上面的show()方法的方式。如下：
$(selector).hide(); $(selector).hide(1000); $(selector).hide("slow"); $(selector).hide(1000, function(){});
實現點擊按鈕顯示盒子，再點擊按鈕隱藏盒子
代碼如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 200px; height: 200px; background-color: green; border: 1px solid red; display: none; } </style> </head> <body> <div id="box"> </div> <button id="btn">隱藏</button> </body> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> //jquery 提供了一些方法 show() hide() 控制元素顯示隱藏 var isShow = true; $(‘#btn‘).click(function(){ if(isShow){ $(‘#box‘).show(‘slow‘,function(){ $(this).text(‘盒子出來了‘); $(‘#btn‘).text(‘顯示‘); isShow = false; }) }else{ $(‘#box‘).hide(2000,function(){ $(this).text(‘‘); $(‘#btn‘).text(‘隱藏‘); isShow = true; }) } }) </script></html>
開關式顯示隱藏動畫
$(‘#box‘).toggle(3000,function(){});
顯示和隱藏的來回切換採用的是toggle()方法：就是先執行show()，再執行hide()。
代碼如下：
$(‘#btn‘).click(function(){ $(‘#box‘).toggle(3000,function(){ $(this).text(‘盒子出來了‘); if ($(‘#btn‘).text()==‘隱藏‘) { $(‘#btn‘).text(‘顯示‘); }else{ $(‘#btn‘).text(‘隱藏‘); } }); })滑入和滑出
1、滑入動畫效果：（類似於生活中的捲簾門）
$(selector).slideDown(speed, 回呼函數);
解釋：下拉動畫，顯示元素。
注意：省略參數或者傳入不合法的字串，那麼則使用預設值：400毫秒（同樣適用於fadeIn/slideDown/slideUp）
2、滑齣動畫效果：
$(selector).slideUp(speed, 回呼函數);
解釋：上拉動畫，隱藏元素。
3、滑入滑出切換動畫效果：
$(selector).slideToggle(speed, 回呼函數);
代碼如下：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; display: none; background-color: green; } </style> <script src="jquery-3.3.1.js"></script> <script> $(function () { //點擊按鈕後產生動畫 $("button:eq(0)").click(function () { //滑入動畫： slideDown(毫秒值，回呼函數[顯示完畢執行什麼]); $("div").slideDown(2000, function () { alert("動畫執行完畢！"); }); }) //滑齣動畫 $("button:eq(1)").click(function () { //滑齣動畫：slideUp(毫秒值，回呼函數[顯示完畢後執行什麼]); $("div").slideUp(2000, function () { alert("動畫執行完畢！"); }); }) $("button:eq(2)").click(function () { //滑入滑出切換（同樣有四種用法） $("div").slideToggle(1000); }) }) </script></head><body><button>滑入</button><button>滑出</button><button>切換</button><div></div></body></html>淡入淡齣動畫
1、淡入動畫效果：
$(selector).fadeIn(speed, callback);
作用：讓元素以淡淡的進入視線的方式展示出來。
2、淡齣動畫效果：
$(selector).fadeOut(1000);
作用：讓元素以漸漸消失的方式隱藏起來
3、淡入淡出切換動畫效果：
$(selector).fadeToggle(‘fast‘, callback);
作用：通過改變透明度，切換匹配元素的顯示或隱藏狀態。
參數的含義同show()方法。
代碼如下：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; display: none; /*透明度*/ opacity: 0.5; background-color: red; } </style> <script src="jquery-3.3.1.js"></script> <script> $(function () { //點擊按鈕後產生動畫 $("button:eq(0)").click(function () {// //淡入動畫用法1: fadeIn(); 不加參數 $("div").fadeIn();// //淡入動畫用法2: fadeIn(2000); 毫秒值// $("div").fadeIn(2000);// //通過控制 透明度和display //淡入動畫用法3: fadeIn(字串); slow慢：600ms normal正常:400ms fast快：200ms// $("div").fadeIn("slow");// $("div").fadeIn("fast");// $("div").fadeIn("normal"); //淡入動畫用法4: fadeIn(毫秒值，回呼函數[顯示完畢執行什麼]);// $("div").fadeIn(5000,function () {// alert("動畫執行完畢！");// }); }) //滑齣動畫 $("button:eq(1)").click(function () {// //滑齣動畫用法1: fadeOut(); 不加參數 $("div").fadeOut();// //滑齣動畫用法2: fadeOut(2000); 毫秒值// $("div").fadeOut(2000); //通過這個方法實現的：display: none;// //通過控制 透明度和display //滑齣動畫用法3: fadeOut(字串); slow慢：600ms normal正常:400ms fast快：200ms// $("div").fadeOut("slow");// $("div").fadeOut("fast");// $("div").fadeOut("normal"); //滑齣動畫用法1: fadeOut(毫秒值，回呼函數[顯示完畢執行什麼]);// $("div").fadeOut(2000,function () {// alert("動畫執行完畢！");// }); }) $("button:eq(2)").click(function () { //滑入滑出切換 //同樣有四種用法 $("div").fadeToggle(1000); }) $("button:eq(3)").click(function () { //改透明度 //同樣有四種用法 $("div").fadeTo(1000, 0.5, function () { alert(1); }); }) }) </script></head><body><button>淡入</button><button>淡出</button><button>切換</button><button>改透明度為0.5</button><div></div></body></html>自訂動畫
文法：
$(selector).animate({params}, speed, callback);
作用：執行一組CSS屬性的自訂動畫。
第一個參數表示：要執行動畫的CSS屬性（必選）
第二個參數表示：執行動畫時間長度（可選）
第三個參數表示：動畫執行完後，立即執行的回呼函數（可選）
代碼如下：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { position: absolute; left: 20px; top: 30px; width: 100px; height: 100px; background-color: green; } </style> <script src="jquery-3.3.1.js"></script> <script> jQuery(function () { $("button").click(function () { var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100}; var json2 = { "width": 100, "height": 100, "left": 100, "top": 100, "border-radius": 100, "background-color": "red" }; //自訂動畫 $("div").animate(json, 1000, function () { $("div").animate(json2, 1000, function () { alert("動畫執行完畢！"); }); }); }) }) </script></head><body><button>自訂動畫</button><div></div></body></html>停止動畫
$(selector).stop(true, false);
裡面的兩個參數，有不同的含義。
第一個參數：
true：後續動畫不執行。
false：後續動畫會執行。
第二個參數：
true：立即執行完成當前動畫。
false：立即停止當前動畫。
PS：參數如果都不寫，預設兩個都是false。實際工作中，直接寫stop()用的多。
案例：滑鼠移至上方時，彈出下拉式功能表（下拉時帶動畫）
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 330px; height: 30px; margin: 100px auto 0; padding-left: 10px; background-color: pink; } .wrap li { background-color: green; } .wrap > ul > li { float: left; margin-right: 10px; position: relative; } .wrap a { display: block; height: 30px; width: 100px; text-decoration: none; color: #000; line-height: 30px; text-align: center; } .wrap li ul { position: absolute; top: 30px; display: none; } </style> <script src="jquery-3.3.1.js"></script> <script> //入口函數 $(document).ready(function () { //需求：滑鼠放入一級li中，讓他裡面的ul顯示。移開隱藏。 var jqli = $(".wrap>ul>li"); //綁定事件 jqli.mouseenter(function () { $(this).children("ul").stop().slideDown(1000); }); //綁定事件(移開隱藏) jqli.mouseleave(function () { $(this).children("ul").stop().slideUp(1000); }); }); </script></head><body><div class="wrap"> <ul> <li> <a href="javascript:void(0);">一級菜單1</a> <ul> <li><a href="javascript:void(0);">二級菜單2</a></li> <li><a href="javascript:void(0);">二級菜單3</a></li> <li><a href="javascript:void(0);">二級菜單4</a></li> </ul> </li> <li> <a href="javascript:void(0);">二級菜單1</a> <ul> <li><a href="javascript:void(0);">二級菜單2</a></li> <li><a href="javascript:void(0);">二級菜單3</a></li> <li><a href="javascript:void(0);">二級菜單4</a></li> </ul> </li> <li> <a href="javascript:void(0);">三級菜單1</a> <ul> <li><a href="javascript:void(0);">三級菜單2</a></li> <li><a href="javascript:void(0);">三級菜單3</a></li> <li><a href="javascript:void(0);">三級菜單4</a></li> </ul> </li> </ul></div></body></html>
ps:
javascript:void(0); //跟javascript:;效果一樣
上方代碼中，關鍵的地方在於，用了stop函數，再執行動畫前，先停掉之前的動畫。
前端 ----jQuery的動畫效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
