编程 Javascript

jquery淡入淡出效果简单实例

Posted in Javascript onJanuary 14, 2016

本文实例讲述了jquery淡入淡出效果实现方法。分享给大家供大家参考，具体如下：

之前理解有一些误区，以为淡入淡出是删除该元素，其实只是把该元素隐藏起来和显示出来罢了。

具体代码如下：

<!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>

希望本文所述对大家jQuery程序设计有所帮助。

jquery淡入淡出效果简单实例

- Author -

乘着风在飞

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

经典的解除许多网站无法复制文字的绝招

Dec 31 Javascript

让iframe自适应高度（支持XHTML，支持FF）

Jul 24 Javascript

Jquery中增加参数与Json转换代码

Nov 20 Javascript

jQuery 工具函数学习资料

Apr 29 Javascript

判定是否原生方法的JS代码

Nov 12 Javascript

jQuery中after()方法用法实例

Dec 25 Javascript

RequireJS入门一之实现第一个例子

Sep 30 Javascript

一个字符串中出现次数最多的字符统计这个次数【实现代码】

Apr 29 Javascript

深入理解angularjs过滤器

May 25 Javascript

canvas实现十二星座星空图

Feb 14 Javascript

Vue2.0组件间数据传递示例

Mar 07 Javascript

viewer.js实现图片预览功能

Jun 24 Javascript

jQuery实现的左右移动焦点图效果

Jan 14 #Javascript

详解JavaScript中的构造器Constructor模式

Jan 14 #Javascript

jquery+json实现动态商品内容展示的方法

Jan 14 #Javascript

jQuery遮罩层效果实例分析

Jan 14 #Javascript

JavaScript面向对象之私有静态变量实例分析

Jan 14 #Javascript

浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

Jan 14 #Javascript

js实现input密码框提示信息的方法(附html5实现方法)

Jan 14 #Javascript