53 jQuery-animate()方法
阿新 • • 發佈：2019-01-03
1.效果圖
2.HTML程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>53 jQuery-animate()方法</title> <style type="text/css"> .divFrame{border:solid 1px #ccc;background-color:#eee; width:60px;height:50px; font-size:13px;padding:5px} </style> </head> <body> <div class="divFrame"> 點選變大 </div> <script src="../jquery.min.js"></script> <script type="text/javascript"> $(function(){ //div元素點選事件 $(".divFrame").click(function(){ //寬與高變化的動畫效果 $(this).animate({width:"20%", height:"70px"}, 3000, function(){//動畫完成時執行的一個回撥函式 $(this).css({"border":"solid 3px #666"}).html("變大了"); }) }) }) </script> </body> </html>