本文實例講述了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常見經典特效匯總》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答