動畫DOM及CSS操作 自定義動畫 animate(最終css狀態，時間) 這個最終css狀態是一個對象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> div{ w ...
動畫DOM及CSS操作
自定義動畫 animate(最終css狀態，時間)
這個最終css狀態是一個對象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> div{ width:200px; height:200px; background:pink; } </style> <script src="jquery.js"></script> <script> $(function(){ $("div").mouseover(function(){ $(this).animate({ "opacity":.3, "width":"300px", "height":300 },3000); }) }) </script> </head> <body> <div></div> </body> </html>
第二個參數可以給動畫設置時間，有個問題是當滑鼠快速觸發事件時，動畫由於時長的原因會出現延遲的效果
因此需要保證在下一次動畫執行時，先立刻停止上一次未完成的動畫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> div{ width:200px; height:200px; background:pink; } </style> <script src="jquery.js"></script> <script> $(function(){ $("div").mouseover(function(){ $(this).stop().animate({ "opacity":.3, "width":"300px", "height":300 },1000); }); $("div").mouseout(function(){ $(this).stop().animate({ "opacity":1, "width":"200px", "height":200 },1000); }) }) </script> </head> <body> <div></div> </body> </html>
.delay(時間) 方法可以實現動畫的暫停
以下效果實現延遲1s後再進行下一次動畫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> div{ width:200px; height:200px; background:pink; } </style> <script src="jquery.js"></script> <script> $(function(){ $("div").mouseover(function(){ $(this).stop().animate({ "opacity":.3, "width":"300px", "height":300 },1000).delay(1000).animate({ "opacity":.3, "width":"400px", "height":"400px" }); }); }) </script> </head> <body> <div></div> </body> </html>
動畫函數
.show() 顯示
.hode() 隱藏
傳入時間時會產生動畫效果，是通過改變元素的寬高和透明度來進行動畫
參數有：具體的時間、slow、normal、fast
.toggle() 根據當前狀態決定是show還是hide
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> div{ width:200px; height:200px; background:pink; } </style> <script src="jquery.js"></script> <script> $(function(){ $("div").mouseover(function(){ $(this).stop().hide("slow").show("fast"); $(this).stop().toggle(1000); }); }) </script> </head> <body> <div></div> </body> </html>
.fadeIn() 淡入
.fadeOut() 淡出
通過更改元素的透明度來實現，不會改變元素的寬高
.fadeToggle() 根據元素的狀態來判斷是顯示還是隱藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> div{ width:200px; height:200px; background:pink; } </style> <script src="jquery.js"></script> <script> $(function(){ $("div").mouseover(function(){ $(this).stop().fadeOut("slow").fadeIn("fast"); }); }) </script> </head> <body> <div></div> </body> </html>
.slideDown() 垂直方向顯示
.slideUp() 垂直方向隱藏
在垂直方向上改變元素的高度
.slideToggle() 根據當前狀態決定是顯示還是隱藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> div{ width:200px; height:200px; background:pink; } </style> <script src="jquery.js"></script> <script> $(function(){ $("div").mouseover(function(){ $(this).stop().slideUp().slideDown(); }); }) </script> </head> <body> <div></div> </body> </html>
計時器
.setTimeout(fn, time) 延遲
當函數內部使用計時器調用自身時，可以起到迴圈的效果
可以使用clearTimeout() 清空計時器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> div{ width:200px; height:200px; background:pink; } </style> <script src="jquery.js"></script> <script> $(function(){ var timer=null; function fn(){ $("div").stop().slideUp().slideDown(); timer=setTimeout(fn,1000);//開始計時器 } fn(); $("button").click(function(){ clearTimeout(timer);//清空計時器 }); }); </script> </head> <body> <button>停止</button> <div></div> </body> </html>
.setInterval(fn, time) 每隔一定時間執行一次
有個缺陷：不會立刻執行，而是會等待1秒鐘
.clearInterval() 清空迴圈
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> div{ width:200px; height:200px; background:pink; } </style> <script src="jquery.js"></script> <script> $(function(){ var timer=null; function fn(){ $("div").stop().slideUp().slideDown(); } timer=setInterval(fn,1000);//開始迴圈 $("button").click(function(){ clearInterval(timer);//停止迴圈 }); }); </script> </head> <body> <button>停止</button> <div></div> </body> </html>
最後是之前的輪播圖項目改進
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jquery</title> <link rel="stylesheet" href="style.css"> <script src="jquery.js"></script> <script src="script.js"></script> </head> <body> <span class="top"></span> <nav> <a href="#">banner1</a> <a href="#">banner2</a> <a href="#">banner3</a> <a href="#">banner4</a> </nav> <div class="img-box"> <img src="image/cat1.jpg"> <img src="image/cat2.jpg"> <img src="image/cat3.jpg"> <img src="image/cat4.jpg"> </div> </body> </html>
style.css
* { margin: 0; padding: 0; border: none; } html, body { overflow: hidden;/*解決因為盒模型溢出造成的垂直方向滾動條*/ height: 100%; background-color: rgb(145, 176, 200); } span.top { display: block; width: 16px; height: 16px; margin: 30px auto 40px; border-radius: 50%; background-color: #fff; } nav { position: relative; display: flex;/*彈性盒模型*/ width: 40%; margin: 0 auto 45px; justify-content: space-between;/*實現元素在容器內左右均勻分佈*/ } nav:before { position: absolute; top: 20px; display: block; width: 100%; height: 10px; content: '';/*激活偽元素*/ background-color: #fff; } nav > a { font-size: 14px; position: relative; /*預設是static定位，會被絕對定位覆蓋 修改為相對定位之後，會覆蓋前面的元素*/ padding: 10px 20px; text-decoration: none; color: rgb(144, 146, 152); border: 2px solid rgb(144, 146, 152); background-color: #fff; } .img-box { position: relative; overflow: hidden; width: 250px; height: 250px; margin: 0 auto; background-color: #fff; box-shadow: 0 0 30px 0 rgba(144, 146, 152, .3); } .img-box img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 98%; margin: auto;/*以上5句實現絕對定位的居中*/ } /*# sourceMappingURL=style.css.map */
script.js
$(function(){ var index=$("a").length-1; //綁定多個事件 $("a").add(document).on({ click:function(event){ event.stopPropagation();//阻止冒泡 index=$(this).index(); // 獲取當前點擊的a的index swiper(); }, mouseenter:function(event){ event.stopPropagation();//阻止冒泡 console.log($(this)[0].nodeName);//當前對象的標簽名 if($(this)[0].nodeName=="A"){ index=$(this).index(); // 獲取當前點擊的a的index }else{ return true; } swiper(); }, keydown:function(event){ if(event.keyCode==37){//左 index=index>0 ? --index : $("a").length-1; }else if(event.keyCode==39){//右 index=index<$("a").length-1 ? ++index : 0; }else{ return true; } swiper(); } }); var swiper=function(){ $("img").eq(index) .stop().fadeIn(1000)
