jQuery学习笔记（三）jQuery动画效果
生活随笔
收集整理的這篇文章主要介紹了
jQuery学习笔记（三）jQuery动画效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、對角線動畫
效果：讓元素在規定時間里沿著左上角來回顯示和隱藏 jq對象.show() hide() toggle() 注意： 1. 括號中可以加動畫時長（slow normal fast 毫秒數）任一個； 2. fast=200 normal=400 slow=600 3. 默認不做動畫演示：
html代碼：
<body> <input type="button" value="顯示" /> <input type="button" value="隱藏" /> <input type="button" value="切換" /> <div class="box"><img src="../img/one.gif" /> </div> </body>jquery代碼：
<script src="../js/jquery-3.3.1.min.js"></script><script>$(function () {var inputs = $("input");// 顯示inputs.eq(0).click(function () {$(".box").show("slow"); // slow normal fast 1000});// 隱藏inputs.eq(1).click(function () {$(".box").hide();});// 切換inputs.eq(2).click(function () {$(".box").toggle(1000);});});</script>2、滑動動畫
效果：讓元素在規定時間里下拉和上拉來回顯示和隱藏 jq對象.slideDown() slideUp() slideToggle() 注意：如果沒有參數，默認以normal（400）的速度做動畫演示：
html代碼：同上
jQuery代碼：
$(function () {var inputs = $("input");// 顯示inputs.eq(0).click(function () {$(".box").slideDown("slow"); // slow normal fast 1000});// 隱藏inputs.eq(1).click(function () {$(".box").slideUp();});// 切換inputs.eq(2).click(function () {$(".box").slideToggle(1000);});});?
3、淡入談出動畫
效果：讓元素在規定時間里不斷改變透明度直到顯示和隱藏 jq對象.fadeIn() fadeOut() fadeToggle() 注意：如果沒有參數，默認以normal（400）的速度做動畫演示：
html代碼：同上
jQuery代碼：
<script src="../js/jquery-3.3.1.min.js"></script> <script>$(function () {var inputs = $("input");// 顯示inputs.eq(0).click(function () {$(".box").fadeIn("slow"); // slow normal fast 1000});// 隱藏inputs.eq(1).click(function () {$(".box").fadeOut();});// 切換inputs.eq(2).click(function () {$(".box").fadeToggle(1000);});}); </script>?
4、透明度動畫
效果：讓元素在規定時間里改變一定的透明度 jq對象.fadeTo(時間,透明度) 透明度取值0-1 可以準確的設置透明度，而且透明度最終會停留在標簽身上。 注意：只是降低盒子的透明度，不是隱藏盒子演示：
html代碼：
<body><input type="button" value="改變透明度" /><input type="button" value="還原透明度" /><div class="box"><img src="../img/one.gif"/></div> </body>jQuery代碼：
<script src="../js/jquery-3.3.1.min.js"></script> <script>$(function () {var inputs = $("input");// 改變透明度inputs.eq(0).click(function () {$(".box").fadeTo(1000, 0);});// 還原透明度inputs.eq(1).click(function () {$(".box").fadeTo(1000, 1);});}); </script>?
5、案例
5.1、表格隔行變色
html代碼：
<body><table id="table" border="1" width="100%" align="center" style="text-align: center;"><tr><td colspan="5" align="left"><input id="uncheckBtn" type="button" value="全不選" /><input id="reverseBtn" type="button" value="反選" /></td></tr><tr><th>全選<input id="all" type="checkbox" /></th><th>分類ID</th><th>分類名稱</th><th>分類描述</th><th>操作</th></tr><tr><td><input type="checkbox" class="itemSelect" /></td><td>1</td><td>手機數碼</td><td>手機數碼類商品</td><td><a href="javascript:;">修改</a>|<a href="javascript:;">刪除</a></td></tr><tr><td><input type="checkbox" class="itemSelect" /></td><td>2</td><td>電腦辦公</td><td>電腦辦公類商品</td><td><a href="javascript:;">修改</a>|<a href="javascript:;">刪除</a></td></tr><tr><td><input type="checkbox" class="itemSelect" /></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包類商品</td><td><a href="javascript:;">修改</a>|<a href="javascript:;">刪除</a></td></tr><tr><td><input type="checkbox" class="itemSelect" /></td><td>4</td><td>家居飾品</td><td>家居飾品類商品</td><td><a href="javascript:;">修改</a>|<a href="javascript:;">刪除</a></td></tr></table> </body>jquery代碼：
<script src="../js/jquery-3.3.1.min.js"></script> <script>$(function () {// 1. 獲取 tr 標簽$("tr:gt(1):even").css("backgroundColor", "yellow");$("tr:gt(1):odd").css("backgroundColor", "skyblue");}); </script>5.2、復選框全選全不選
html代碼：同上
jquery代碼：
<script src="../js/jquery-3.3.1.min.js"></script> <script>$(function () {// 需求1 :全選$("#all").click(function () {// 1. 獲取 all 標簽的 checked 狀態 (prop 方法)var checked = $("#all").prop("checked");// 2. 得到所有的 itemSelect 選項框, 狀態與 checked 保持一致$(".itemSelect").prop("checked", checked);});// 需求2 : 全不選$("#uncheckBtn").click(function () {$(".itemSelect").prop("checked", false);$("#all").prop("checked", false);});// 需求3 : 反選$("#reverseBtn").click(function () {$(".itemSelect").click();// 1. 獲取 itemSelect 的個數var len1 = $(".itemSelect").length;// 2. 獲取 itemSelect 的被選中的個數var len2 = $(".itemSelect:checked").length;// alert(len1 + " : " + len2);// 3. 判斷if (len1 == len2) {$("#all").prop("checked", true);} else {$("#all").prop("checked", false);}});}); </script>?
5.3、QQ表情添加案例
說明：
讓被點擊的當前圖片對象實現克隆, 然后拼接到類名word標簽之后
?
html代碼：
!DOCTYPE html> <html> <head><meta charset="UTF-8" /><title>QQ表情選擇</title><style type="text/css">*{margin: 0;padding: 0;list-style: none;}.emoji{margin:50px;}ul{overflow: hidden;}li{float: left;width: 48px;height: 48px;cursor: pointer;}.emoji img{ cursor: pointer; }</style> </head> <body> <div class="emoji"><ul><li><img src="../img/01.gif" height="22" width="22" alt="" /></li><li><img src="../img/02.gif" height="22" width="22" alt="" /></li><li><img src="../img/03.gif" height="22" width="22" alt="" /></li><li><img src="../img/04.gif" height="22" width="22" alt="" /></li><li><img src="../img/05.gif" height="22" width="22" alt="" /></li><li><img src="../img/06.gif" height="22" width="22" alt="" /></li><li><img src="../img/07.gif" height="22" width="22" alt="" /></li><li><img src="../img/08.gif" height="22" width="22" alt="" /></li><li><img src="../img/09.gif" height="22" width="22" alt="" /></li><li><img src="../img/10.gif" height="22" width="22" alt="" /></li><li><img src="../img/11.gif" height="22" width="22" alt="" /></li><li><img src="../img/12.gif" height="22" width="22" alt="" /></li></ul><p class="word"><strong>請發言：</strong><img src="../img/12.gif" height="22" width="22" alt="" /></p> </div> </body> </html>jquery代碼：
<script src="../js/jquery-3.3.1.min.js"></script> <script>$(function () {// 1. 給所有圖片綁定事件$("img").click(function () {// 2. 一旦圖片被點擊, 需要將當前圖片克隆到類名為 word 標簽之后.// $("img") 獲取的是所有的 img 標簽.// $("img").clone().appendTo(".word");// 原因: clone() 和 appendTo 方法是 jquery 提供的, this 是 JS 對象.// this.clone().appendTo(".word");$(this).clone().appendTo(".word");});}); </script>?
總結
以上是生活随笔為你收集整理的jQuery学习笔记（三）jQuery动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 纯CSS实现超美选项卡
- 下一篇： r7 6700g核显相当于什么显卡 锐龙