jquery 淡入淡出效果入门例子

发布时间:2019-08-09编辑:脚本学堂
本文介绍了jquery 淡入淡出效果的实现代码,主要是把元素隐藏起来与显示出来,一起来学习下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>淡入淡出效果-www.jb200.com</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>