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>www.dhdzp.com 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>www.dhdzp.com 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)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

jquery實(shí)現(xiàn)表格隔行換色效果
下面一個(gè)示例為大家詳細(xì)介紹下使用jquery實(shí)現(xiàn)表格的隔行換色功能，感興趣的朋友可以參考下
2015-11-11
jquery實(shí)現(xiàn)圖片隨機(jī)排列的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)圖片隨機(jī)排列的方法,涉及jQuery操作圖片的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-05-05
jQuery實(shí)現(xiàn)復(fù)選框批量選擇與反選的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)復(fù)選框批量選擇與反選的方法,主要通過(guò)jQuery的attr與removeAttr方法實(shí)現(xiàn)選擇與反選的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-06-06
Eclipse引入jquery報(bào)錯(cuò)如何解決
有朋友問(wèn)我，在是使用eclipse的過(guò)程中遇到了這么一個(gè)問(wèn)題--eclipse導(dǎo)入jquery包后報(bào)錯(cuò)——究竟是什么原因?qū)е逻@一問(wèn)題發(fā)生的呢？該如何解決此問(wèn)題呢？下面小編給大家?guī)?lái)了解決辦法，不妨一起看看吧
2015-12-12
jQuery File Upload文件上傳插件使用詳解
jQuery File Upload 是一個(gè)Jquery文件上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預(yù)覽、列表顯示圖片大小，支持上傳進(jìn)度條顯示；支持各種動(dòng)態(tài)語(yǔ)言開(kāi)發(fā)的服務(wù)器端.這篇文章主要介紹了jQuery File Upload文件上傳插件使用,需要的朋友可以參考下
2016-12-12
jQuery 循環(huán)遍歷改變a標(biāo)簽的href(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇jQuery 循環(huán)遍歷改變a標(biāo)簽的href(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
jQuery中scrollLeft()方法用法實(shí)例
這篇文章主要介紹了jQuery中scrollLeft()方法用法,實(shí)例分析了scrollLeft()方法的功能、定義及獲取或設(shè)置匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移(offset)量時(shí)的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery高級(jí)編程之js對(duì)象、json與ajax用法實(shí)例分析
這篇文章主要介紹了jQuery高級(jí)編程之js對(duì)象、json與ajax用法,結(jié)合實(shí)例形式分析了js對(duì)象的創(chuàng)建、使用,json格式數(shù)據(jù)轉(zhuǎn)換及ajax交互等相關(guān)操作技巧,需要的朋友可以參考下
2019-11-11
jQuery實(shí)現(xiàn)圖片上傳和裁剪插件Croppie
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片上傳和裁剪插件Croppie，實(shí)現(xiàn)最常見(jiàn)的各用戶系統(tǒng)要求用戶上傳和裁剪頭像的應(yīng)用，感興趣的小伙伴們可以參考一下
2015-11-11
14個(gè)有用的Jquery技巧分享
這篇文章主要介紹了14個(gè)有用的Jquery技巧分享,本文有一些性能優(yōu)化技巧、編碼優(yōu)化技巧、簡(jiǎn)潔方法等,需要的朋友可以參考下
2015-01-01