52 jQuery-使用slideToggle()方法的動畫效果自動切換圖片的高度
阿新 • • 發佈：2019-01-03
1.效果圖
2.HTML程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>52 jQuery-使用slideToggle()方法的動畫效果自動切換圖片的高度</title> <style type="text/css"> .divFrame{border:solid 1px #666;background-color:#eee;padding:5px;width:149px} .divFrame img{border:solid 1px #eee;padding:2px;width: 144px;height: 60px;} </style> </head> <body> <div class="divFrame"> <img src="../img/pig.jpg" alt="" title="我是一隻小笨豬" /> </div> <script src="../jquery.min.js"></script> <script type="text/javascript"> $(function(){ //div元素的單擊事件 $(".divFrame").click(function(){ //圖片高度狀態自動切換，並執行一個回撥函式 $("img").slideToggle(3000, function(){ $("img").css("border", "solid 1px #ccc"); }) }) }) </script> </body> </html>