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 相关文章推荐
popdiv
Jul 14 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 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+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
python实现四人制扑克牌游戏
2020/04/22 Python
python代码区分大小写吗
2020/06/17 Python
简单的Python人脸识别系统
2020/07/14 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
实习生个人找工作的自我评价
2013/10/30 职场文书
新学期家长寄语
2014/01/19 职场文书
迟到早退检讨书
2014/02/10 职场文书
顶碗少年教学反思
2014/02/21 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
爱之链教学反思
2014/04/30 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
2015年教师新年寄语
2014/12/08 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
教师旷工检讨书
2015/08/15 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
bat批处理之字符串操作的实现
2022/03/16 Python