jQuery 常用特效例項小結【顯示與隱藏、淡入淡出、滑動、動畫等】

阿新 • • 發佈：2020-05-20

本文例項講述了jQuery 常用特效。分享給大家供大家參考，具體如下：

顯示與隱藏

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 #content{display: none;}
 </style>
 <script src="jQuery/jquery-1.8.3.js"></script>
 <script type="text/javascript">
    $('#btn').click(function(event) {
     if ($(this).text() === '顯示說明') {
     $('#content').show();
            //$('#content').show('slow');//設定顯示速度，1000為一秒，也可以用fast或slow
            //$('#content').show('slow',function() {
              //$('h3').css('color','red');
            //});//設定顯示完成後的回撥函式
     $(this).text('隱藏說明');
     } else {
     $('#content').hide();
     $(this).text('顯示說明');
     }
    });
   });
 </script>
</head>
<body>
   <img src="images/logo.jpg" alt='logo' style="width: 300px">
   <div>
   <p id="content">百度logo，埃裡克森上放聲大哭就會發生放聲大哭肌膚時受到了飛機上的法律手段無可奈何花落去</p>
 </div>
   <div style="clear: both">
   <button type="button" name="button" id="btn">顯示說明</button>
   </div>
 
</body>
</html>

淡入與淡出

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 #content{display: none;}
 </style>
 <script src="jQuery/jquery-1.8.3.js"></script>
 <script type="text/javascript">
    //1、淡入
    $('#fadeIn').click(function(event) {
     $('#group1 img:first').fadeIn('slow');
     $('#group1 img:eq(1)').fadeIn('fast');
     $('#group1 img:last').fadeIn(3000,function() {
     alert('淡入');
     });
    });
    //2、淡出
    $('#fadeOut').click(function(event) {
     $('#group2 img:first').fadeOut('slow');
     $('#group2 img:eq(1)').fadeOut('fast');
     $('#group2 img:last').fadeOut(3000,function() {
     alert('淡出');
     });
    });
    //3、淡入/淡出結合
    $('#fadeToggle').click(function(event) {
     $('#group3 img:first').fadeToggle('slow');
     $('#group3 img:eq(1)').fadeToggle('fast');
     $('#group3 img:last').fadeToggle(3000,function() {
     alert('淡入/淡出結合');
     });
    });
    //4、設定褪色級別
    $('#fadeTo').click(function(event) {
     $('#group4 img:first').fadeTo('slow',0.6);
     $('#group4 img:eq(1)').fadeTo('fast',0.4);
     $('#group4 img:last').fadeTo(3000,0.2,function() {
     alert('圖片褪色');
     });
    });
   });
 </script>
 <style>
 #group1 img{display: none;}
 </style>
</head>
<body>
 <div id="group1">
 <button type="button" name="button" id="fadeIn">淡入</button>
 <img src="images/1.png" alt="jQuery 常用特效例項小結【顯示與隱藏、淡入淡出、滑動、動畫等】">
 <img src="images/2.png" alt="jQuery 常用特效例項小結【顯示與隱藏、淡入淡出、滑動、動畫等】" width="100px">
 <img src="images/3.png" alt="jQuery 常用特效例項小結【顯示與隱藏、淡入淡出、滑動、動畫等】">
 </div>
 <div id="group2">
 <button type="button" name="button" id="fadeOut">淡出</button>
 <img src="images/1.png" alt="jQuery 常用特效例項小結【顯示與隱藏、淡入淡出、滑動、動畫等】">
 <img src="images/2.png" alt="jQuery 常用特效例項小結【顯示與隱藏、淡入淡出、滑動、動畫等】" width="100px">
 <img src="images/3.png" alt="jQuery 常用特效例項小結【顯示與隱藏、淡入淡出、滑動、動畫等】">
 </div>
 <div id="group3">
 <button type="button" name="button" id="fadeToggle">淡入/淡出自動</button>
 <img src="images/1.png" alt="jQuery 常用特效例項小結【顯示與隱藏、淡入淡出、滑動、動畫等】">
 <img src="images/2.png" alt="jQuery 常用特效例項小結【顯示與隱藏、淡入淡出、滑動、動畫等】" width="100px">
 <img src="images/3.png" alt="jQuery 常用特效例項小結【顯示與隱藏、淡入淡出、滑動、動畫等】">
 </div>
 <div id="group4">
 <button type="button" name="button" id="fadeTo">設定褪色級別</button>
 <img src="images/1.png" alt="jQuery 常用特效例項小結【顯示與隱藏、淡入淡出、滑動、動畫等】">
 <img src="images/2.png" alt="jQuery 常用特效例項小結【顯示與隱藏、淡入淡出、滑動、動畫等】" width="100px">
 <img src="images/3.png" alt="jQuery 常用特效例項小結【顯示與隱藏、淡入淡出、滑動、動畫等】">
 </div>
 
</body>
</html>

滑動

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>滑動效果</title>
 <style>
 #wrap img{width: 100px;}
 /*#content {width: 100px;display: none;}*//*向下滑動*/
 </style>
 <script type="text/javascript"></script>
 <script src="jQuery/jquery-1.8.3.min.js"></script>
 <script>
 $(document).ready(function() {
  //1、向下滑動
  $('#wrap img').bind('click',function() {
  // $('#content').slideDown('slow');
  $('#content').slideDown('slow',function(event) {
   $('#wrap img').fadeOut('slow',function(event) {
   $(this).attr('src','images/3.png').fadeIn('slow');
   });
  });
  });
  //2、向上滑動
  $('#wrap img').bind('click',function() {
  // $('#content').slideUp('slow');
  $('#content').slideUp('slow','images/3.png').fadeIn('slow');
   });
  });
  });
  //3、展開與收起切換
  $('#wrap img').bind('click',function() {
  // $('#content').slideToggle('slow');
  $('#content').slideToggle('slow',function(event) {
   if ($(this).attr('src') == 'images/3.png') {
    $(this).attr('src','images/2.png').fadeIn('slow');
   } else {
    $(this).attr('src','images/3.png').fadeIn('slow');
   }
   });
  });
  });
 });
 </script>
</head>
<body>
 <div id='wrap'>
 <div id='content'>
  <h3>百度</h3>
  <p>要福克斯地方思考就回復剞城飄飄㱒發生糾紛還是葉</p>
 </div>
 <img src="images/2.png" alt="百度">
 </div>
</body>
</html>

動畫例項

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>動畫</title>
 <style>
 img{width: 0;opacity: 0;}
 .content{display: none;}
 </style>
 <script src="jQuery/jquery-1.8.3.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
  $('#btn').click(function(event) {
  $('img').before('<br>');
                //當按鈕內容為顯示時，修改按鈕內容，顯示圖片和說明
  if ($(this).text() == '顯示') {
   $(this).text('隱藏');
   $('img').animate({//動畫屬性物件（必選）
   width:200,//屬性必須是css屬性，只支援數字型，不支援字型顏色
   opacity:1,//屬性值單位：預設為px
   },{//動畫選項屬性（可選）
   duration:3000,complete:function(event) {
    $('.content').slideDown(3000);
   }
   });
  } else {//當按鈕內容為隱藏時，修改按鈕內容，隱藏圖片和說明
   $(this).text('顯示');
   $('img').animate({//動畫屬性物件（必選）
   width:0,opacity:0,},complete:function(event) {
    $('.content').slideUp(3000);
   }
   });
  }
  });
 });
 </script>
</head>
<body>
 <button type="button" name="button" id="btn">顯示</button>
 <img src="images/2.png" alt="baidu">
 <div class="content">
 <p>富士康地方就是看適當放寬了；收款方式斯洛伐克但是</p>
 </div>
</body>
</html>

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於jQuery相關內容感興趣的讀者可檢視本站專題：《jQuery頁面元素操作技巧彙總》、《jQuery常見事件用法與技巧總結》、《jQuery常用外掛及用法總結》、《jQuery擴充套件技巧總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程式設計有所幫助。