不用圖片作背景CSS做的小燈籠效果_練習用
695
2024-04-03
本文實例講述了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="http://www.gimoo.net/t/1903/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常見經典特效匯總》
希望本文所述對大家jQuery程序設計有所幫助。
