jquery淡入淡出效果简单实例
更新时间：2016年01月14日 14:29:10 作者：乘着风在飞
这篇文章主要介绍了jquery淡入淡出效果简单实现方法,以完整实例形式分析了jQuery中fadeIn及fadeOut实现淡入淡出的相关技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
这篇文章主要介绍了jQuery实现简单的tab标签页效果,涉及jQuery简单元素遍历与样式动态操作相关技巧,需要的朋友可以参考下2016-09-09
jQuery实现图片放大原理很简单，就是将图片显示的尺寸变大后放在浏览器的一个指定位置，从而实现图片的放大预览，下面有个不错的示例，感兴趣的朋友可以参考下2013-09-09
图片放大在某些例如商品细节放大图比较常见，本文写了一个图片放大的示例适合日常应付，有需求的朋友可以参考下2013-08-08
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
本篇文章主要是对Jquery实现点击按钮,连续地向textarea中添加值的实例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
本篇文章主要介绍了详解layui中的树形关于取值传值问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了jQuery的层级查找方式,结合实例形式分析了jQuery常用的三种层级查找的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06![基于jquery的lazy loader插件实现图片的延迟加载[简单使用]](//img.jbzj.com/images/xgimg/bcimg6.png)
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
当网站上有大量图片要展示的话，如果一次把所有的图片都加载出来的话，这势必会影响网站的加载速度，给用户带来比较差的体验。2011-05-05
JQuery扩展插件Validate—6 radio、checkbox、select的验证
radio、checkbox、select的验证其实方法与前面提到没有太大的区别，但问题是错误信息会显示在同一组的第一个元素后面2011-09-09
Jquery+bootstrap实现表格行置顶置底上移下移操作详解
这篇文章主要为大家详细介绍了Jquery+bootstrap实现表格行置顶置底上移下移操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
jquery的index方法实现tab效果，需要的朋友可以参考下。2011-02-02
![基于jquery的lazy loader插件实现图片的延迟加载[简单使用]](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论