JS/jQuery实现DIV延时几秒后消失或显示的方法

本文实例讲述了JS/jQuery实现DIV延时几秒后消失或显示的方法。分享给大家供大家参考,具体如下:

1、最常用的方法(setTimeout):

<script language='javascript' type='text/javascript'>
$(function () {
 setTimeout(function () {
  $("divid").show();
 }, 6000);
})
</script>

2、第二种方法(delay

jquery 让一个div延时消失,纯jQuery,不用settimeout,就用jQuery写。

<script language='javascript' type='text/javascript'>
$(document).ready(
 function()
 {
  /**
  *1.delay函数是jquery 1.4.2新增的函数
  *2.hide函数里必须放一个0,不然延时不起作用
  */
  $('#divid').delay(6000).hide(0);
 }
);
</script>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

  • 网页图片延时加载的js代码
  • JavaScript延时效果比较不错的
  • js实现网页图片延时加载 提升网页打开速度
  • JS图片根据鼠标滚动延时加载的实例代码
  • JS延时提示框实现方法详解
  • 原生javaScript实现图片延时加载的方法
  • javascript实现延时显示提示框特效代码
  • jQuery 鼠标经过(hover)事件的延时处理示例
  • jQuery hover 延时器实现代码
  • Jquery实现图片预加载与延时加载的方法
  • jQuery实现鼠标经过事件的延时处理效果
  • jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
时间: 2018-02-11

jQuery 鼠标经过(hover)事件的延时处理示例

一.关于鼠标hover事件及延时 鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处理.但是,有时候,为了避免不必要的干扰,常会对鼠标hover事件进行延时处理.所谓干扰,就是当用户鼠标不经意划过摸个链接,选项卡,或是其他区域时,本没有显示隐藏层,或是选项卡切换,但是由于这些元素上绑定了hover事件(或是mouseover事件),且无延时,这些时间就会立即触发,反而会对用户进行干

JavaScript延时效果比较不错的

nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","

原生javaScript实现图片延时加载的方法

本文实例讲述了原生javaScript实现图片延时加载的方法.图片延时加载其实是有jquery插件了并且加载方法非常的简单并且合理了,但有朋友觉得加载jquery插件包太大了,于时自己写了一个,给各位分享一下. 首先,图片延时加载可以节省我们带宽,获取到更好的用户体验,尤其对于图片多的站点,这一点显得至关重要,下面就跟大家探讨一下图片延时加载原理和实现代码. 图片延时加载原理 图片延时加载原理是在html里面的图片src填的并不是真正的图片地址,而是以一种自定义属性把图片地址赋给img标签,如:

JS延时提示框实现方法详解

本文实例讲述了JS延时提示框实现方法.分享给大家供大家参考,具体如下: 提示框功能:当鼠标指向头像时,弹出一个信息框,鼠标可移动到信息框,当鼠标离开头像时信息框消失,当鼠标离开信息框时信息框消失. 实现功能思路: 1.获取元素. 2.当鼠标指向Div1时,Div2显示. 3.当鼠标离开Div1时,使Div2延迟0.5秒消失,这样以便有时间把鼠标移到Div2. 4.当鼠标指向Div2时,Div2显示.因为第3步设置setTimeout使Div2消失,所以把用clearTimeout()把setTi

jQuery实现鼠标经过事件的延时处理效果

jQuery鼠标经过(hover)事件的延时处理,具体JS代码如下: (function($){ $.fn.hoverDelay = function(options){ var defaults = { hoverDuring: 200, outDuring: 200, hoverEvent: function(){ $.noop(); }, outEvent: function(){ $.noop(); } }; var sets = $.extend(defaults,options ||

网页图片延时加载的js代码

实现原理 把所有需要延时加载的图片改成如下的格式: <img lazy_src="图片路径" border="0"/> 然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图片的src的值用lazy_src的来替换(加载图片) 代码 lazyLoad=(function() { var map_element = {}; var el

JS图片根据鼠标滚动延时加载的实例代码

最近研究了京东商城用jQuery的实现如下:就是默认地址赋给img标签的src2属性,显示时赋给src属性值. 复制代码 代码如下: function lazyload(option) {    var settings = {defObj: null,defHeight: 0    };    settings = $.extend(settings, option || {});    var defHeight = settings.defHeight;    var defObj = (

Jquery实现图片预加载与延时加载的方法

本文实例讲述了Jquery实现图片预加载与延时加载的方法.分享给大家供大家参考.具体分析如下: 有很多项目经常会需要判断图片加载完成后执行相应的操作,或者需要图片延迟加载,网上虽然已经有很不错的插件,但要为这些效果还得单独加载一个插件的话总感觉有点不舒服,干脆自己写了个方法: 复制代码 代码如下: function loadimg(arr,funLoading,funOnLoad,funOnError){  var numLoaded=0,  numError=0,  isObject=Obje

jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】

本文实例讲述了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

javascript实现延时显示提示框特效代码

本文实例讲述了JavaScript使用setTimeout实现延迟弹出警告框的方法.分享给大家供大家参考.具体如下: 先给大家展示一个延迟/定时/强制弹出窗口的JS代码 参数解释: 设置时间:Then.setTime(Then.getTime() + 1*60*60*1000) mylove/ttan.htm(过渡网页) ttan.htm中的 http://弹出网页/ 是要弹出的网页 scroll:1(滚动条) status:1(状态栏) help:1(帮助按钮) toolbar=1(工具栏)

js实现网页图片延时加载 提升网页打开速度

提升网页加载速度的方法有很多种,用 jquery.lazyload.js 实现图片异步延迟加载,对于页面包含图片较多的网站来说,会是个不错的提升网页打开速度的方法.代码君网站栏目页列表左侧,在PC端预览时能看到一个文章略缩图展示模块,一定程度上会延长网页加载时间.本文采用图片异步延迟加载的方法,来提升本站页面加载速度. 图片异步加载,就是不必一次性把页面的所有图片都加载显示出来,等用户滑动滚动条到某个位置时才会加载显示相应位置的图片,这样能很好地提升网页加载速度,进一步提升用户体验. 有很多技术

jQuery hover 延时器实现代码

例如: 复制代码 代码如下: $('#foo').slideUp(300).delay(800).fadeIn(400);// 在.slideUp() 和 .fadeIn()之间延时800毫秒. hover是否可以设计一个延时器呢?答案是肯定的.延时操作目的是为了防止用户误触发事件,一般情况下鼠标指针小于150毫秒的停留时间都可以被忽略.其实,如果入侵delay全能让其作用在hover事件上,但是为了避免John Resig不断的折腾jQuery而导致兼容问题,还是老老实实的写标准插件比较好.

JS延时器提示框的应用实例代码解析

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>延时显示提示框</title> <style> #div1 { float: left; width: 60px; height: 60px; background-color: aqua;

jquery中取消和绑定hover事件的实现代码

在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑定的事件呢? 一.如何绑定hover事件 先看以下代码,假设我们给a标签绑定一个click和hover事件: $(document).ready(function(){ $('a').bind({ hover: function(e) { // Hover event handler alert("

AngularJs 延时器、计时器实例代码

1.$timeout延时器 apptest.controller("main",function($scope,$timeout){ $scope.pink="pink"; $scope.box="第二个盒子"; $timeout(function(){ $scope.pink="第一个盒子内容,延迟两秒后改变了"; },2000); setTimeout(function(){ $scope.pink="第一个盒子

基于jQuery实现歌词滚动版音乐播放器的代码

先给大家看下效果图,感兴趣的朋友可以参考实现代码 核心代码如下所示: $.ajax({ url: "/music/music.txt", type: "get", success: function(data) { data = jQuery.parseJSON(data); var length = data.length; var now=0; for (i = 0; i < length; i++) { $("#musicText li&quo

jQuery平滑旋转幻灯片特效代码分享

本文实例讲述了jQuery平滑旋转幻灯片特效.分享给大家供大家参考.具体如下: 这一款基于jQuery实现平滑旋转幻灯片代码,效果超酷,场面相当震撼:图片大小和颜色自定义请修改jQuery-jcImgScroll.js. 运行效果图:               -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. js关键代码: <script src="js/jQuery-1.7.1.j

jquery判断浏览器类型的代码

Jquery中利用navigator.userAgent.indexOf来判断浏览器类型,并进行了一下处理,建议学习Jquery的朋友学习下,了解一下思路. 主要使用的方法:$.browser.['浏览器关键字'] 复制代码 代码如下: $(function() { if($.browser.msie) { alert("this is msie"); } else if($.browser.safari) { alert("this is safari!"); }

jquery hover 不停闪动问题的解决方法(亦为stop()的使用)

在前端开发中用的较多的是jquery,之前遇到一个问题,一个下拉的jquery下拉菜单效果,hover上去,一直闪动,用mouseovermouseout好好的,当时没搞定,今天逛论坛看到一个方法,可以行.只怪自己之前看jquery api的时候不是很仔细. 解决闪动 可以使用Stop() stop([clearQueue],[jumpToEnd]) 概述 停止所有在指定元素上正在运行的动画. 如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行 参数 [cl

jQuery hover事件简单实现同时绑定2个方法

本文实例讲述了jQuery hover事件简单实现同时绑定2个方法.分享给大家供大家参考,具体如下: 这里将hover事件同时挂2个方法: 1个是悬停的时候执行的,另外一个是离开的时候执行 代码如下: $(document).ready(function() { $("#orderedlist li").hover( function() {$(this).addClass("blue");}, function() {$(this).removeClass(&qu

jQuery三级下拉列表导航菜单代码分享

本文实例讲述了jQuery三级下拉列表导航菜单.分享给大家供大家参考.具体如下: jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js,可无限极分类,可智能判断是否有下级菜单,鼠标经过上次菜单显示下级菜单. 运行效果图:             -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery三级下拉列表导航菜单代码如下 <head> <meta