jquery淡入淡出效果简单实例

前端技术 2023/09/03 JavaScript

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

本文地址：https://www.stayed.cn/item/7872

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案