快捷導(dǎo)航

jQuery實(shí)現(xiàn)的淡入淡出與滑入滑出效果示例

更新時(shí)間：2018年04月18日 10:30:54 作者：包子源

這篇文章主要介紹了jQuery實(shí)現(xiàn)的淡入淡出與滑入滑出效果,結(jié)合實(shí)例形式分析了jQuery中fadeIn、fadeOut、slideDown及slideUp方法相關(guān)使用技巧,需要的朋友可以參考下

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

1. 淡入淡出效果：

我們做這樣一個(gè)實(shí)例：

有兩個(gè)按鈕，點(diǎn)擊淡入，有一個(gè)div層淡入，點(diǎn)擊淡出，div層淡出：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>chabaoo.cn 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="點(diǎn)擊淡入"/>
     <input type="button" id="btna" value="點(diǎn)擊淡出"/>
     <div class="div">
      我是一個(gè)div塊哦?。。。?！
     </div>
  </body>
</html>

運(yùn)行效果：

2. 滑入滑出效果：

我們做這樣一個(gè)實(shí)例：

有兩個(gè)按鈕，點(diǎn)擊滑入，有一個(gè)div層滑入，點(diǎn)擊滑出，div層滑出：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>chabaoo.cn 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="點(diǎn)擊滑入"/>
     <input type="button" id="btna" value="點(diǎn)擊滑出"/>
     <div class="div">
      我是一個(gè)div塊哦?。。。。?
     </div>
  </body>
</html>

運(yùn)行效果：

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)的點(diǎn)擊圖片居中放大縮小功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的點(diǎn)擊圖片居中放大縮小功能,涉及jQuery基于事件響應(yīng)針對(duì)頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-01-01
IE8下Jquery獲取select選中的值post到后臺(tái)報(bào)錯(cuò)問(wèn)題
IE8下出現(xiàn)的問(wèn)題是直接將selectedValue post發(fā)送到后臺(tái)，后臺(tái)接收時(shí)會(huì)報(bào)錯(cuò)，這是因?yàn)镮E8下selectedValue當(dāng)成了數(shù)組，后臺(tái)無(wú)法識(shí)別
2014-07-07
jQuery+ajax中g(shù)etJSON() 用法實(shí)例
這篇文章主要介紹了jQuery+ajax中g(shù)etJSON() 用法實(shí)例,需要的朋友可以參考下
2014-12-12
JQuery中兩個(gè)ul標(biāo)簽的li互相移動(dòng)實(shí)現(xiàn)方法
這篇文章主要介紹了JQuery中兩個(gè)ul標(biāo)簽的li互相移動(dòng)實(shí)現(xiàn)方法,可實(shí)現(xiàn)ul標(biāo)簽中l(wèi)i標(biāo)簽內(nèi)容相互替換的技巧,涉及jQuery操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
淺析jQuery 3.0中的Data
jQuery 3.0 在6月9日正式發(fā)布了，3.0 也被稱為下一代的 jQuery。這篇文章主要介紹了jQuery 3.0中的Data,包括Data在jQuery內(nèi)部的使用和1.x.x 和 2.x.x 的比較的相關(guān)內(nèi)容，需要的朋友可以參考下
2016-06-06
jquery獲取當(dāng)前元素索引值用法實(shí)例
這篇文章主要介紹了jquery獲取當(dāng)前元素索引值用法,實(shí)例分析了jQuery獲取當(dāng)前元素索引在創(chuàng)建圖片輪播效果中的使用技巧,需要的朋友可以參考下
2015-06-06
jQuery實(shí)現(xiàn)一組圖片循環(huán)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)一組圖片循環(huán)滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
jquery選擇器的選擇使用及性能介紹
從這一講開(kāi)始，我們將直正接觸一個(gè)JQ類庫(kù)，學(xué)習(xí)一下JQ的寫法，JQ的一些常用的命令等等，今天主要講的是JQ里的選擇器，這也是JQ的一大特點(diǎn)，這從它的名稱jQuery中可以看到，主要功力體現(xiàn)在查詢上
2013-01-01
用jquery的attr方法實(shí)現(xiàn)圖片切換效果
這篇文章主要為大家詳細(xì)介紹了用jquery的attr方法實(shí)現(xiàn)圖片切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
jquery easyui dataGrid動(dòng)態(tài)改變排序字段名的方法
jQuery easyui dataGrid 動(dòng)態(tài)改變排序字段名，一般情況下，在使用的時(shí)候，我們會(huì)點(diǎn)擊相應(yīng)字段進(jìn)行排序。今天小編以java為例給大家講解問(wèn)題原因及解決方案，需要的的朋友參考下
2017-03-03