jquery淡入淡出效果简单实例


Posted in Javascript onJanuary 14, 2016

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

Javascript 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 #Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 #Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 #Javascript
jQuery遮罩层效果实例分析
Jan 14 #Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 #Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 #Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 #Javascript
You might like
PHP删除HTMl标签的实现代码
2013/06/30 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
document.createElement()用法
2013/03/13 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
vue-cli之router基本使用方法详解
2017/10/17 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
python selenium firefox使用详解
2019/02/26 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Python 如何查找特定类型文件
2020/08/17 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
C++的几个面试题附答案
2016/08/03 面试题
Final类有什么特点
2012/04/25 面试题
红旗团支部事迹材料
2014/01/27 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
政协常委会议主持词
2015/07/03 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
Python函数中apply、map、applymap的区别
2021/11/27 Python