JQuery 总结（2） jQuery 效果动画
一? 切換
? ?1.基本
??show()展示,hide()隱藏,toggle()切換
| 1 2 3 4 5 6 7 8 9 | show()展示,hide()隱藏,toggle()切換<br> btn.click(function () { ????btn1.toggle( ??????"slow",function () {???? 這個效果完成后 執行后面的fun函數 ????????div.css({ ??????????background:"red" ????????}) ??????}); ? ??}) |
2.滑動效果
slideDown 顯示? ?slideUp 隱藏? slideToggle 來回滑動切換
| 1 | slideDown 顯示?? slideUp 隱藏? slideToggle 來回滑動切換 |
| 1 2 3 4 5 | btn.click(function () { ???div.slideToggle();?? 顯示效果 ???? ? ??}) |
3.淡入淡出
?
fadeIn(出來)??fadeOut(隱藏)?fadeToggle(來回變化)??fadeTo(1000,0.4)? 花? 1秒變成0.4透明度
| 1 2 3 | $(".btn1").click(function(){ ??$("p").fadeTo(1000,0.4); ??}); |
? ? ?1秒之后執行后面的函數
? ? ?$(".btn1").click(function(){
? ? ?$("p").fadeOut(1000,function(){
? ? ?$(".btn1").css("color","red")? ? ? ?
? ? ?});
?
eg:案例展示：點擊菜單 顯示或者隱藏下面的內容，
主要用到函數
| 1 | <span?style="color: #ff0000; font-size: 18px; background-color: #ffffff;"> div.slideToggle()? 然后設置一個開關，動態調整箭頭的方向</span> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE?html> <html?lang="en"> <head> ??<meta?charset="UTF-8"> ??<title>Document</title> ??<style> ??div{width: 440px;height: 200px;} ????input{width: 100px;height: 300px;background-color: red} ????ul{ ??????background-color: red ????} ??</style> </head> <body> ??<ul><strong>九江長虹婦產醫院</strong> <span>V</span> ????<li>a1</li> ????<li>a2</li> ????<li>a3</li> ????<li>a4</li> ????<li>a5</li> ????<li>a6</li> ????<li>a7</li> ????<li>a8</li> ??</ul> <script?src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> ??var li =$("li"); ??var strong =$("strong"); ??var btn1 =$("#btn1"); ??var onoff=true; ??strong.click(function () { ???li.slideToggle(500); ???if (onoff) { ????$("span").text("V"); ????onoff=false; ???} else{ ??????$("span").text("^"); ????onoff=true; ????} ? ??? ??}) ? ??// btn1.click(function () { ??//? div.slideDown(); ???? ? ??// }) ? </script> </body> </html> |
?二 animate 動畫
??? 1.? ?同時執行
? ? ? ? ?$.animate({top:200,left:50},5000,function(){})? ??
? ? ? ? ? ? ? ? ? ?動畫改變的內容? 時間? 動畫結束的函數
?
????2. 順序執行
$("li").animate({ top:0, left:300},1000)
$("li").animate({ top:300, left:300},1000)
?等同于：
$("li").on("click",function () {
$("li").animate({ top:0, left:300},1000,function () {
$("li").animate({ top:300, left:300},1000)
})? ? ? ?注意 left:"+=30" 可以做累加動畫? ? ? ? ? ?
? 3.延遲動畫
? $("li").delay(2000).animate({? top:0,? left:"+=300"},100)
? ???4.停止動畫
? ?$("li").stop();
?
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | strong.click(function test() { ???ul.animate({ ??????top:200, ??????left:200, ?????ul:ul.css({ backgroundColor:"orange"}) ???},5000,function () { ????ul.animate({ ??????top:0, ??????left:0, ???????ul:ul.css({ backgroundColor:"red"})? 注意這個地方改變背景顏色 用這種方式? 也是奇怪 ?????// backgroundColor:"red" ???},5000,function () { ?????test() ???}) }) ?}) |
總結
以上是生活随笔為你收集整理的JQuery 总结（2） jQuery 效果动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JQuery 总结（1） 选择器的使用
- 下一篇： JQuery 总结（3） jQuery