51 jQuery-使用slideDown()與slideUp()方法實現滑動效果
阿新 • • 發佈：2019-01-03
1.效果圖
2.HTML程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>51 jQuery-使用slideDown()與slideUp()方法實現滑動效果</title> <style type="text/css"> body{font-size:13px} .divFrame{width:86px;border:solid 1px #666} .divFrame .divTitle{padding:5px;background-color:#eee;cursor: pointer;} .divFrame .divContent{padding:8px;} .divFrame .divContent img{border:solid 1px #ccc;padding:2px;width: 60px;height: 60px;} </style> </head> <body> <div class="divFrame"> <div class="divTitle">隱藏圖片</div> <div class="divContent"> <img src="../img/pig.jpg" alt=""/> <div id="divTip"></div> </div> </div> <script src="../jquery.min.js"></script> <script type="text/javascript"> $(function(){ //初始化一個布林變數值 var blnShow = false; //定義變數獲取標題部分 var $Title = $(".divTitle"); //定義變數獲取提示元素 var $Tip = $("#divTip"); //點選標題部分事件 $Title.click(function(){ if (!blnShow) { //圖片高度向上減小，執行完成後，回撥一個函式 $("img").slideUp(3000, function(){ $Tip.html("關閉成功！") }) //改變標題內容 $(this).html("顯示圖片"); //改變布林變數值 blnShow = true; }else { //清空提示內容 $Tip.html(""); //圖片高度向下增大 $("img").slideDown(3000); $(this).html("隱藏圖片"); blnShow = false; } }) }) </script> </body> </html>