jquery淡入淡出效果简单实例

本文实例讲述了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程序设计有所帮助。