快捷導(dǎo)航

jquery淡入淡出效果簡單實(shí)例

更新時間：2016年01月14日 14:29:10 作者：乘著風(fēng)在飛

這篇文章主要介紹了jquery淡入淡出效果簡單實(shí)現(xiàn)方法,以完整實(shí)例形式分析了jQuery中fadeIn及fadeOut實(shí)現(xiàn)淡入淡出的相關(guān)技巧,需要的朋友可以參考下

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

之前理解有一些誤區(qū)，以為淡入淡出是刪除該元素，其實(shí)只是把該元素隱藏起來和顯示出來罷了。

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
  <mce:script type="text/javascript" src="jquery-1.4.4.min.js" mce_src="jquery-1.4.4.min.js"></mce:script>
  <title>Example | xHTML1.0</title>
</head>
<body>
<button id="click">click</button>
<ul id="ul">
<li>#</li>
<li>@</li>
<li>$</li>
</ul>
<mce:script type="text/javascript"><!--
$(function () {
  var _num = 1;
  $("#click").click(function () {
    var _ul = $("#ul");
    var _li = $("#ul li");
    var _len = _li.length;
    var _str = "<li style="display:none" mce_style="display:none">" + _num + "</li>";
    _li.eq(_len-1).fadeOut('slow',function () {
      $(this).remove();
    });
    ++_num;
    $(_str).prependTo(_ul).fadeIn('slow');
  });
});
// --></mce:script>
</body>
</html>

更多關(guān)于jQuery特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見經(jīng)典特效匯總》

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

您可能感興趣的文章:

相關(guān)文章

jquery中的常用事件bind、hover、toggle等示例介紹
這篇文章主要介紹了jquery中常用的事件，比如$(document).ready()、bind、hover、toggle、click等等，并有示例，易于學(xué)習(xí)
2014-07-07
jquery隊(duì)列queue與原生模仿其實(shí)現(xiàn)方法分享
jquery中的queue和dequeue是一組很有用的方法，他們對于一系列需要按次序運(yùn)行的函數(shù)特別有用。特別animate動畫，ajax，以及timeout等需要一定時間的函數(shù)
2014-03-03
jQuery性能優(yōu)化技巧分析
這篇文章主要介紹了jQuery性能優(yōu)化技巧,較為詳細(xì)的分析了jQuery的常見使用技巧,非常具有實(shí)用價值,需要的朋友可以參考下
2015-02-02
jQuery表單驗(yàn)證簡單示例
這篇文章主要介紹了jQuery表單驗(yàn)證的方法,結(jié)合簡單實(shí)例形式分析了jQuery針對表單必填項(xiàng)進(jìn)行驗(yàn)證的方法,需要的朋友可以參考下
2016-10-10
使用js顯示當(dāng)前時間示例
這篇文章主要介紹了使用js顯示當(dāng)前時間示例,這里也用到了jquery，讓得把它也要引入到頁面中
2014-03-03
文件編碼導(dǎo)致jquery失效的解決方法
本篇文章是對文件編碼導(dǎo)致jquery失效的解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
2013-06-06
jQuery Mobile開發(fā)中日期插件Mobiscroll使用說明
這篇文章主要介紹了jQuery Mobile開發(fā)中日期插件Mobiscroll使用說明,需要的朋友可以參考下
2016-03-03
解析ajaxFileUpload 異步上傳文件簡單使用
本篇文章主要介紹了ajaxFileUpload 異步上傳文件簡單使用，jQuery插件AjaxFileUpload可以實(shí)現(xiàn)ajax文件上傳。有興趣的可以了解一下，
2016-12-12
jquery 鎖定彈出層實(shí)現(xiàn)代碼
這個東西也是隨手總結(jié)出來的，引用了一些js框架jquery的方法。
2010-02-02
Jquery圖片延遲加載插件jquery.lazyload.js的使用方法
這篇文章主要介紹了Jquery圖片延遲加載插件jquery.lazyload.js的使用方法,需要的朋友可以參考下
2014-05-05