jQuery如何實現(xiàn)淡入淡出與滑入滑出效果

小編給大家分享一下jQuery如何實現(xiàn)淡入淡出與滑入滑出效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

目前創(chuàng)新互聯(lián)已為上千多家的企業(yè)提供了網(wǎng)站建設、域名、虛擬空間、綿陽服務器托管、企業(yè)網(wǎng)站設計、網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。我們擁有完善的網(wǎng)絡基礎設施服務，能夠為企業(yè)或個人提供空間域名、虛擬空間、企業(yè)郵局、網(wǎng)站加速、數(shù)據(jù)庫、云主機等網(wǎng)絡基礎服務。

本文實例講述了jQuery實現(xiàn)的淡入淡出與滑入滑出效果。分享給大家供大家參考，具體如下：

1. 淡入淡出效果：

我們做這樣一個實例：

有兩個按鈕，點擊淡入，有一個div層淡入，點擊淡出，div層淡出：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>www.jb51.net jQuery淡入淡出</title>
    <style>
      .div{width: 300px;height: 300px;background-color: red;display: none;}
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
      $(function(){
        $("#btn").click(function(){
          $(".div").fadeIn();
        });
        $("#btna").click(function(){
          $(".div").fadeOut();
        });
      });
    </script>
  </head>
  <body>
     <input type="button" id="btn" value="點擊淡入"/>
     <input type="button" id="btna" value="點擊淡出"/>
     <div class="div">
      我是一個div塊哦?。。。?！
     </div>
  </body>
</html>

運行效果：

jQuery如何實現(xiàn)淡入淡出與滑入滑出效果

2. 滑入滑出效果：

我們做這樣一個實例：

有兩個按鈕，點擊滑入，有一個div層滑入，點擊滑出，div層滑出：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>www.jb51.net jQuery滑入滑出</title>
    <style>
      .div{width: 300px;height: 300px;background-color: green;display: none;}
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
      $(function(){
        $("#btn").click(function(){
          $(".div").slideDown();
        });
        $("#btna").click(function(){
          $(".div").slideUp();
        });
      });
    </script>
  </head>
  <body>
     <input type="button" id="btn" value="點擊滑入"/>
     <input type="button" id="btna" value="點擊滑出"/>
     <div class="div">
      我是一個div塊哦?。。。。?
     </div>
  </body>
</html>

運行效果：

jQuery如何實現(xiàn)淡入淡出與滑入滑出效果

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。

看完了這篇文章，相信你對“jQuery如何實現(xiàn)淡入淡出與滑入滑出效果”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當前題目：jQuery如何實現(xiàn)淡入淡出與滑入滑出效果
文章轉(zhuǎn)載：http://muchs.cn/article44/iehjee.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計、用戶體驗、企業(yè)建站、網(wǎng)站內(nèi)鏈、App設計、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)