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的表头固定的若干方法
Jan 27 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 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中for循环语句的几种变型
2007/03/16 PHP
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
PHP 上传文件的方法(类)
2009/07/30 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
javascript整除实现代码
2010/11/23 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python+django实现文件下载
2016/01/17 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
应用服务器有那些
2012/01/19 面试题
单位授权委托书范文
2014/08/02 职场文书
个人收入证明模板
2014/09/18 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
六一亲子活动感想
2015/08/07 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android