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 相关文章推荐
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
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使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
Python中自定义函数的教程
2015/04/27 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
python实现用户登录系统
2016/05/21 Python
python3调用windows dos命令的例子
2019/08/14 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
校运会入场式解说词
2014/02/10 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
大学四年个人自我小结
2014/03/05 职场文书
迎新晚会主持词
2014/03/24 职场文书
演讲稿的写法
2014/05/19 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js