時間：2023-06-06 11:24:02 | 來源：網站運營
時間：2023-06-06 11:24:02 來源：網站運營
5.jQuery 快速網頁交互開發(fā)-jQ動畫：
在線咨詢
window.onload = function () { console.log(1); var btn = document.getElementsByTagName("input")[0]; console.log(btn); };$(document).ready(function () { console.log(2); var btn = document.getElementsByTagName("input")[0]; console.log(btn); })$(function () { console.log(3); var btn = document.getElementsByTagName("input")[0]; console.log(btn); })hide()：元素隱藏，隱藏的前提必須是元素 display:block； show()：元素顯示，顯示的前提必須是元素 display:none; toggle()：在元素隱藏和顯示之間進行切換。 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img { display: block; width: 320px; height: 480px; } </style></head><body> <input type="button" value="隱藏" id="btn1"> <input type="button" value="顯示" id="btn2"> <input type="button" value="切換" id="btn3"><br> <img src="images/cat.jpg" id="pic"> <script src="js/jquery-1.12.4.min.js"></script> <script> // 獲取元素 var $pic = $("#pic") var $btn1 = $("#btn1") var $btn2 = $("#btn2") var $btn3 = $("#btn3") </script></body>如果不傳參數：直接顯示和隱藏，沒有過渡動畫。$btn1.click(function () { $pic.hide(); })如果傳遞參數： $btn1.click(function () { $pic.hide(1000); }) $btn2.click(function () { $pic.show("normal"); }) $btn3.click(function () { $pic.toggle("fast"); })slideDown()：滑動顯示（方向不一定） slideUp()：滑動隱藏 slideToggle()：滑動切換 <head> <style> img { display: block; width: 320px; height: 480px; } </style></head><body> <input type="button" value="滑動隱藏" id="btn1"> <input type="button" value="滑動顯示" id="btn2"> <input type="button" value="滑動切換" id="btn3"><br> <img src="images/cat.jpg" id="pic"> <script src="js/jquery-1.12.4.min.js"></script> <script> // 獲取元素 var $pic = $("#pic") var $btn1 = $("#btn1") var $btn2 = $("#btn2") var $btn3 = $("#btn3") </script></body>$btn1.click(function () { $pic.slideUp(1000) }) $btn2.click(function () { $pic.slideDown(1000) }) $btn3.click(function () { $pic.slideToggle(1000) })注意：<style> img { /* position: fixed; bottom: 10px; */ display: block; /* width: 320px; */ height: 480px; } </style>img { position: fixed; bottom: 10px; display: block; width: 320px; height: 480px; }fadeIn()：淡入，透明度逐漸增大最終顯示。 fadeOut()：淡出，透明度逐漸降低最終隱藏。 fadeToggle()：切換效果。 fadeTo()：淡入或淡出到某個指定的透明度。 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img { display: block; width: 320px; height: 480px; } </style></head><body> <input type="button" value="淡出隱藏" id="btn1"> <input type="button" value="淡入顯示" id="btn2"> <input type="button" value="淡入淡出切換" id="btn3"> <input type="button" value="fadeTo 0.5" id="btn4"><br> <img src="images/cat.jpg" id="pic"> <script src="js/jquery-1.12.4.min.js"></script> <script> // 獲取元素 var $pic = $("#pic") var $btn1 = $("#btn1") var $btn2 = $("#btn2") var $btn3 = $("#btn3") var $btn4 = $("#btn4") </script></body>$btn1.click(function () { $pic.fadeOut("slow") }) $btn2.click(function () { $pic.fadeIn(1000) }) $btn3.click(function () { $pic.fadeToggle() }) $btn4.click(function () { $pic.fadeTo(500,0.5) })$(selector).animate(styles,speed,easing,callback)<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } p{ width: 80px; height: 80px; background-color: #aaa; margin-bottom: 10px; position: relative; left: 0; } </style></head><body> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <script src="js/jquery-1.12.4.min.js"></script> <script> // 獲取元素 var $ps = $("p"); // 習慣會將運動時間存儲到一個變量中 var during = 2000; // 添加點擊事件，讓元素運動 $ps.click(function () { // 讓自己的 left 的值變?yōu)?500 // $(this).animate({"left": 500},during,"swing",function () { // // 在運動結束后，讓元素變紅色 // $(this).css("background","red") // }) // 所有有數值的屬性都可以運動 // $(this).animate({"width": 500}) // $(this).animate({"opacity": 0.5}) $(this).animate({"background": "#000"}) }) </script></body><head> <style> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; border: 10px solid #ccc; position: absolute; left: 0; top: 0; background: url(images/0.jpg) no-repeat center center; } .box2{ border-radius: 50%; overflow: hidden; } div span{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); } </style></head><body> <div class="box1"><span></span></div> <!-- <div class="box2"><span></span></div> --> <script src="js/jquery-1.12.4.min.js"></script> <script> // 獲取元素 var $box1 = $(".box1") var $box2 = $(".box2") var during = 2000; // 給 第一個 元素添加動畫 $box1.animate({"left": 400,"top": 400},during) $box1.animate({"left": 400},during) $box1.animate({"top": 400},during) $box1.animate({"left": 0},during) $box1.animate({"top": 0},during) $box2.animate({"top": 400},during) </script></body>非運動的代碼，關于同一個元素對象的，也不會排隊$box1.css("height",100)其他的運動方法，如果設置給同一個元素，也會發(fā)生排隊$box1.mouseenter(function () { $(this).children().slideUp(during) }) $box1.mouseleave(function () { $(this).children().slideDown(during) })// 給同一個元素的多個運動進行鏈式調用寫法$box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)<head> <style> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; border: 10px solid #ccc; position: absolute; left: 0; top: 0; background: url(images/0.jpg) no-repeat center center; } .box2{ border-radius: 50%; overflow: hidden; } div span{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); } </style></head><body> <div class="box1"><span></span></div> <div class="box2"><span></span></div> <script src="js/jquery-1.12.4.min.js"></script> <script> // 獲取元素 var $box1 = $(".box1") var $box2 = $(".box2") var during = 2000; </script></body>$box1.animate({"left": 500},during); $box2.delay(2000).animate({"left": 500},during);關鍵詞：交互
