时间：2023-06-06 11:24:02 | 来源：网站运营
时间：2023-06-06 11:24:02 来源：网站运营
5.jQuery 快速网页交互开发-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 的值变为 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)其他的运动方法，如果设置给同一个元素，也会发生排队$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);关键词：交互
