jQuery基礎–動畫操作
- 2019 年 10 月 10 日
- 筆記
- 三組基本動畫
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: pink; display: none; } </style> </head> <body> <input type="button" value="顯示"> <input type="button" value="隱藏"> <div></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("input").eq(0).click(function () { //show不傳參數，沒有動畫效果 //$("div").show(); //show(speed) //speed:動畫的持續時間 可以是毫秒值 還可以是固定字符串 //fast:200ms normal:400ms slow:600 //$("div").show("ddd"); // show([speed], [callback]) $("div").show(1000, function () { console.log("哈哈，動畫執行完成啦"); }) }); $("input").eq(1).click(function () { $("div").hide(); }) }); </script> </body> </html>
滑入滑出
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: pink; display: none; } </style> </head> <body> <input type="button" value="顯示"> <input type="button" value="隱藏"> <input type="button" value="切換"> <div></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { //滑入（slideDown） 滑出：slideU $("input").eq(0).click(function () { //slideDown：如果不傳參數，有一個默認值normal //$("div").slideDown(); //$("div").slideDown(1000); $("div").slideDown(1000, function () { console.log("額呵呵"); }); }); $("input").eq(1).click(function () { $('div').slideUp(); }) $("input").eq(2).click(function () { //如果是滑入狀態，就執行滑出的動畫， $('div').slideToggle(); }) }); </script> </body> </html>
淡入淡出
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: pink; display: none; } </style> </head> <body> <input type="button" value="顯示"> <input type="button" value="隱藏"> <input type="button" value="切換"> <div></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { //淡入：fadeIn 淡出：fadeOut 切換：fadeToggle $("input").eq(0).click(function () { $("div").fadeIn(2000); }); $("input").eq(1).click(function () { $("div").fadeOut(1000); }) $("input").eq(2).click(function () { //如果是滑入狀態，就執行滑出的動畫， $('div').fadeToggle(); }) }); </script> </body> </html>
下拉菜單案例
<!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-image: url(imgs/bg.jpg); } .wrap li { background-image: url(imgs/libg.jpg); } .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-1.12.4.js"></script> <script> $(function () { //mouseover：鼠標經過事件 //mouseout:鼠標離開事件 //mouseenter:鼠標進入事件 //mouseleave：鼠標離開事件 var $li = $(".wrap>ul>li"); //給li註冊鼠標經過事件，讓自己的ul顯示出來 $li.mouseenter(function () { //找到所有的兒子，並且還得是ul //stop：停止當前正在執行的動畫 $(this).children("ul").stop().slideDown(); }); $li.mouseleave(function () { $(this).children("ul").stop().slideUp(); }); }); </script> </head> <body> <div class="wrap"> <ul> <li> <a href="javascript:void(0);">一級菜單1</a> <ul class="ul"> <li><a href="javascript:void(0);">二級菜單11</a></li> <li><a href="javascript:void(0);">二級菜單12</a></li> <li><a href="javascript:void(0);">二級菜單13</a></li> </ul> </li> <li> <a href="javascript:void(0);">一級菜單2</a> <ul> <li><a href="javascript:void(0);">二級菜單21</a></li> <li><a href="javascript:void(0);">二級菜單22</a></li> <li><a href="javascript:void(0);">二級菜單23</a></li> </ul> </li> <li> <a href="javascript:void(0);">一級菜單3</a> <ul> <li><a href="javascript:void(0);">二級菜單31</a></li> <li><a href="javascript:void(0);">二級菜單32</a></li> <li><a href="javascript:void(0);">二級菜單33</a></li> </ul> </li> </ul> </div> </body> </html>
輪播圖案例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>京東商城</title> <style> * { margin: 0; padding: 0; list-style: none; } .slider { height: 340px; width: 790px; margin: 100px auto; position: relative; } .slider li { position: absolute; display: none; } .slider li:first-child { display: block; } .arrow { display: none; } .slider:hover .arrow { display: block; } .arrow-left, .arrow-right { font-family: "SimSun", "宋體"; width: 30px; height: 60px; background-color: rgba(0, 0, 0, 0.1); position: absolute; top: 50%; margin-top: -30px; cursor: pointer; text-align: center; line-height: 60px; color: #fff; font-weight: 700; font-size: 30px; } .arrow-left:hover, .arrow-right:hover { background-color: rgba(0, 0, 0, .5); } .arrow-left { left: 0; } .arrow-right { right: 0; } </style> </head> <body> <div class="slider"> <ul> <li><a href="#"><img src="images/1.jpg" alt=""></a></li> <li><a href="#"><img src="images/2.jpg" alt=""></a></li> <li><a href="#"><img src="images/3.jpg" alt=""></a></li> <li><a href="#"><img src="images/4.jpg" alt=""></a></li> <li><a href="#"><img src="images/5.jpg" alt=""></a></li> <li><a href="#"><img src="images/6.jpg" alt=""></a></li> <li><a href="#"><img src="images/7.jpg" alt=""></a></li> <li><a href="#"><img src="images/8.jpg" alt=""></a></li> </ul> <!--箭頭--> <div class="arrow"> <span class="arrow-left"><</span> <span class="arrow-right">></span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () { var count = 0; $(".arrow-right").click(function () { count++; if(count == $(".slider li").length){ count = 0; } console.log(count); //讓count漸漸的顯示，其他兄弟漸漸的隱藏 $(".slider li").eq(count).fadeIn().siblings("li").fadeOut(); }); $(".arrow-left").click(function () { count--; if(count == -1){ count = $(".slider li").length - 1; } console.log(count); //讓count漸漸的顯示，其他兄弟漸漸的隱藏 $(".slider li").eq(count).fadeIn().siblings("li").fadeOut(); }) }); </script> </body> </html>
- 自定義動畫
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; } #box2 { background-color: blue; margin-top: 150px; } #box3 { background-color: yellowgreen; margin-top: 300px; } </style> </head> <body> <input type="button" value="開始"> <input type="button" value="結束"> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("input").eq(0).click(function () { //第一個參數：對象，裏面可以傳需要動畫的樣式 //第二個參數：speed 動畫的執行時間 //第三個參數：動畫的執行效果 //第四個參數：回調函數 $("#box1").animate({left:800}, 8000); //swing:鞦韆 搖擺 $("#box2").animate({left:800}, 8000, "swing"); //linear:線性 勻速 $("#box3").animate({left:800}, 8000, "linear", function () { console.log("hahaha"); }); }) }); </script> </body> </html>
手風琴案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; width: 1300px; } #box { width: 1200px; height: 400px; border: 2px solid red; margin: 100px auto; } #box li { width: 240px; height: 400px; /*border: 1px solid #000;*/ float: left; } </style> </head> <body> <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="../jquery-1.12.4.js"></script> <script> $(function () { var $li = $("#box li"); for (var i = 0; i < $li.length; i++) { $li.eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)"); } //給所有的li註冊鼠標經過事件 $li.mouseenter(function () { $(this).stop().animate({width:800}).siblings().stop().animate({width:100}); }).mouseleave(function () { $li.stop().animate({width:240}); }); }); </script> </body> </html>
動畫隊列
$(function () { $("#btn").click(function () { //把這些動畫存儲到一個動畫隊列裏面 $("div").animate({left:800}) .animate({top:400}) .animate({width:300,height:300}) .animate({top:0}) .animate({left:0}) .animate({width:100,height:100}) }) });
停止動畫操作
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: pink; display: none; } </style> </head> <body> <input type="button" value="開始"> <input type="button" value="結束"> <div></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("input").eq(0).click(function () { $("div").slideDown(4000).slideUp(4000); }); $("input").eq(1).click(function () { //stop:停止當前正在執行的動畫 //clearQueue:是否清除動畫隊列 true false //jumpToEnd:是否跳轉到當前動畫的最終效果 true false //.stop().animate(); $("div").stop(true, true); }) }); </script> </body> </html>
