JS学习二十一:JQ中的动画
一、显示与隐藏
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script> <style type="text/css"> #box { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="box"></div> <button id="btn1">隐藏</button> <button id="btn2">显示</button> <script type="text/javascript"> // 原生JS // document.getElementById("btn1").onclick = function(){ // document.getElementById("box").style.display = "none" // } var $div = $("#box") // JQ方式一: hide()无参数 // $("#btn1").click(function() { // $div.hide() // }) // JQ方式二: hide(speed[, callback]) // $("#btn1").click(function() { // $div.hide(1000) // }) // slow对应600毫秒,normal对应400,fast对应200 $("#btn1").click(function() { $div.hide("slow", function() { console.log("动画结束") }) }) // JQ显示的方法:show $("#btn2").click(function() { $div.show("slow", function() { console.log("动画开始") }) }) </script> </body> </html>
使用一个按钮控制显示与隐藏:toggle()方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script> <style type="text/css"> #box { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="box"></div> <button id="btn">切换状态</button> <script type="text/javascript"> var $div = $("#box") $("#btn").click(function() { $div.toggle("slow", function() { console.log("动画切换") }) }) </script> </body> </html>
二、淡入淡出效果
fadeOut()方法--淡出、fadeIn()方法--淡入。
透明度:fadeTo(时间毫秒,透明度),如fadeTo(1000, 0.1),在1秒内透明度变为0.1
一个按键控制淡入淡出:fadeToggle
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script> <style type="text/css"> #box { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="box"></div> <button id="btn1">隐藏</button> <button id="btn2">显示</button> <button id="btn3">透明</button> <button id="btn">切换状态</button> <script type="text/javascript"> var $div = $("#box") $("#btn1").click(function() { $div.fadeOut("slow", function() { console.log("动画结束") }) }) $("#btn2").click(function() { $div.fadeIn("slow", function() { console.log("动画开始") }) }) $("#btn3").click(function() { $div.fadeTo(1000, 0.1) }) $("#btn").click(function() { $div.fadeToggle(1000) }) </script> </body> </html>
三、滑动地隐藏与显示,滑动的淡入淡出
滑动的收缩:slideUp()
滑动的展开:slideDown()
一键滑动的收缩与展开:slideToggle()
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script> <style type="text/css"> #box { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="box"></div> <button id="btn1">隐藏</button> <button id="btn2">显示</button> <button id="btn3">透明</button> <button id="btn">切换状态</button> <script type="text/javascript"> var $div = $("#box") $("#btn1").click(function() { $div.slideUp("slow", function() { console.log("动画结束") }) }) $("#btn2").click(function() { $div.slideDown("slow", function() { console.log("动画开始") }) }) $("#btn3").click(function() { $div.fadeTo(1000, 0.1) }) $("#btn").click(function() { var self = $(this) // 这里的this代表btn按钮,通过变量传递 $div.slideToggle(1000, function() { $(self).text("onOff") }) }) </script> </body> </html>
四、自定义动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script> <style type="text/css"> #box { width: 100px; height: 100px; background-color: red; } </style> </head> <body style="position: relative;"> <div id="box" style="position: absolute;left: 0;top: 0;"></div> <button id="btn">按钮</button> <button id="btn2">动画是否在执行</button> <script type="text/javascript"> var $div = $("#box") // animate(params[,speed][,callback]) // $div.animate({left: "200px"}, 1000).animate({top: "200px"}, 1000) // $div.animate({left: "200px", top: "200px", opacity: "0.5"}, 1000).delay(1000).animate( // {left: "400px"}, 1000) var a = $div.animate({left: "200px", top: "200px", opacity: "0.5"}, 5000).delay(1000).animate( {left: "400px"}, 5000) $("#btn").click(function(){ // a.stop(true, true) // 第一个参数:停止时,是否清空动画的队列 // a.stop(false, true) // 第二个参数:停止时,是否到动画结束的地方 a.stop(false, true) }) // left,top的值,还可以使用+=100px,-=100px,在上个位置的基础上加减多少 // 判断动画是否在执行 $("#btn2").click(function() { if (a.is(":animated")) { console.log("动画在执行中.....") } }) </script> </body> </html>
posted on 2018-12-09 18:14 myworldworld 阅读(123) 评论(0) 收藏 举报