abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery動畫效果實戰(zhàn)</title> <script type="text/javascript" src="
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery動畫效果實戰(zhàn)</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <style type="text/css"> .contents{width: 1440px;margin:0 auto;} img{width: 430px;height: 264px} .main{width: 430px;height: 360px;float: left;border: 1px solid #ccc;margin: 20px;} button{text-align:center;width: 430px;height: 94px;border: none;font-size: 30px;} </style> </head> <body> <div> <div> <img src="images/01.jpg" alt=""> <button>圖片動畫</button> </div> <div> <img src="images/02.jpg" alt=""> <button>上滑下滑效果</button> </div> <div> <img src="images/03.jpg" alt=""> <button>淡入淡出效果</button> </div> <div> <img src="images/04.jpg" alt=""> <button>圖片透明度</button> </div> <div> <img src="images/01.jpg" alt=""> <button>圖片動畫二</button> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $('.but4').click(function(){ $('.img4').animate({opacity:'toggle',width:'toggle'},1000) }) $('.but2').click(function(){ $('.img2').slideToggle(1000) }) $('.but3').click(function(){ $('.img3').fadeToggle(1000) }) $('.but1').click(function(){ $('.img1').each(function(){ $(this).animate({width:'200px'},1500) $(this).animate({width:'430px'},1500) })//老師幫我看看這段代碼,不知道這樣寫有沒有問題,百度出來的結(jié)果 }) $('.but5').click(function(){ $('.img5').animate({width:'200px'},1500) $('.img5').animate({width:'430px'},1500) }) }) </script> </body> </html>
Correcting teacher:韋小寶Correction time:2018-11-26 14:50:20
Teacher's summary:嗯!寫的很不錯哦!以下的腦圖整理的也很棒!至于你這段代碼有沒有問題你在運(yùn)行的時候有沒有看到有啥問題呢?如果是沒有問題那不就是可以正常使用的嘛!其實我們在初學(xué)階段的時候就是要這樣去嘗試!不會的可以各種找別人的代碼過來看!看看為什么要這樣寫!課后記得多多練習(xí)哦!