jQuery删除一个元素后淡出效果展示删除过程的方法

本文实例讲述了jQuery删除一个元素后淡出效果展示删除过程的方法。分享给大家供大家参考。具体分析如下：

当我们删除一个元素时希望能看到删除的过程，这个效果通过对元素进行淡出展示动态化删除过程。

$("#myButton").click(function() {
  $("#myDiv").fadeTo("slow", 0.01, function(){//fade
    $(this).slideUp("slow", function() {//slide up
      $(this).remove();//then remove from the DOM
    });
  });
});

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • php和jquery实现地图区域数据统计展示数据示例

    php和jquery实现地图区域数据统计展示数据示例

    HTML 首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件,本文不重复写下,唯一不同的地方是需要在body中加一个div#tip,用来展示地图信息的提示框. 复制代码 代码如下: <div id="map"></div> <div id="tip"></div> jQuery 通过调用raphael绘制出中国地图,然后载入统计数据,由于地图区块小,我们不在地图载入的时候就将数

  • jQuery实现列表自动滚动循环滚动展示新闻

    jQuery实现列表自动滚动循环滚动展示新闻

    需要在页面中一个小的区域循环滚动展示新闻(公告.活动.图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动. 效果图: 上干货 html: 复制代码 代码如下: <div id="news"> <ul> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofol

  • 基于jQuery实现动态数字展示效果

    我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据.本文将结合实例给大家介绍使用jQuery实现动态数字展示效果. 查看演示 下载源码 HTML代码 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: <div class="count">当前在线:<span id="number"> &

  • jQuery实现的产品自动360度旋转展示特效源码分享

    jQuery实现的产品自动360度旋转展示特效源码分享

    这是一款基于jQuery实现的产品自动360度旋转展示特效代码,可以对产品进行360度旋转展示,更好的让顾客了解产品的全部外观细节. jQuery产品360度旋转展示代码,支持预加载,能够快速全面的的预览产品的图片,主要原理是利用多张图片按顺序播放实现,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码. 运行效果图:---------------------------------效果查看 源码下载----------------------------------- 为大家分享的

  • Jquery动态替换div内容及动态展示的方法

    本文实例讲述了Jquery动态替换div内容及动态展示的方法.分享给大家供大家参考.具体分析如下: 一.问题: 项目中需要在后台拼接html然后在前台通过ajax展示到div中: 复制代码 代码如下: sys_ajaxGet("/dynamic/default.do?method=show", {guid:guid},function(json){        //这里可以正确的展示html内容           alert(json.htmlContent);          

  • jQuery实现图片渐入渐出切换展示效果

    jQuery实现图片渐入渐出切换展示效果

    在这之前我们先看看我们要做的效果是什么样的: 我们要图片在过"一定时间"后自动切换,在右下角处有小方块似数字1,2,3,4,这些数字是根据图片的个数自动出现的,当鼠标经过的时候数字颜色有一定的变化: 下面我们来看看具体怎么实现. 第一步:先写简单的html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/

  • jQuery实现点击图片翻页展示效果的方法

    本文实例讲述了jQuery实现点击图片翻页展示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>基于jQuery实现的点击图片翻页展示效果</title> <meta http-equiv="content-type&q

  • jQuery焦点控制图层展示延迟隐藏的方法

    本文实例讲述了jQuery焦点控制图层展示延迟隐藏的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> <b id="button"

  • jQuery+PHP实现动态数字展示特效

    HTML 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: 复制代码 代码如下: <div class="count">当前在线:<span id="number"></span></div> jQuery 首先我们要定义一个动画过程,使用jQuery的animate()函数实现从一个数字到另一个数字的变换过程,以下magi

  • 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

    利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

    最近要做一个产品展示功能,由于产品比较多,一屏展示不完,所以想要做一个通过点击进行翻页的效果,在网上找了几个都不大好用,最后只能自己动手写了. 效果如下所示: 原理比较简单:将要滚动显示的区域的CSS的override设为hidden,宽度设成一个比较大的值,如4000px,然后每次点击上一页或下一页的按钮时,计算当前页数,如果已经到了最后一页,则回到第一页,滚动是通过控制div的left属性实现的,需要两个div,外面的div的position设为retative,里面的DIV的positio

  • jQuery实现360°全景拖动展示

    CSS 复制代码 代码如下: html,body{background:#333;}  #loading{left:0;top:0;width:100%;height:100%;background:#333;color:#fff;}  #loading span{left:45%;top:40%;font:normal 50px Arial;color:#fff;}  #demo{left:50%;top:50%;margin-left:-512px;margin-top:-384px;wid

随机推荐