.delay()在我的.show() JQuery上不起作用 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

使用jQuery的delay()延迟执行show()和hide()不起效的解决方法

今天使用 jQuery 的 delay() 来延迟执行 hide() ，发现延时不起效，查了一些资料，找到了其中的原因。...show(); //延迟5秒来现在id为test的div 上边的代码无效，必须得在 show() 中传参数： $("#test").delay(5000).show(function(){}); //...只有在队列中的连续事件可以被延时，因此不带参数的 .show() 和 .hide() 就不会有延时，因为他们没有使用动画队列。...也就是说只有 show() 或 hide() 带有参数的时候才能被插入执行队列中。简单的说，其实 show() 和 hide() 在不加参数的情况下是直接对元素的 display 样式设置。...声明：本文由w3h5原创，转载请注明出处：《使用jQuery的delay()延迟执行show()和hide()不起效的解决方法》 https://www.w3h5.com/post/351.html

4.1K1 0

JQuery中的动画

一、show()方法和hide()方法这两种方法是jQuery动画的最基本方法。...show()方法和hide()方法在没有带任何参数的情况下，作用是立即显示或者隐藏匹配的元素，不会有任何动画。...四、自定义动画方法animate() 在很多情况下，上面的三种方法无法满足用户的各种需求，那么久需要对元素有更多的控制，在jQuery中可以使用animate()方法来自定义动画；其语法结构： animate...使用方法如下： $(this).animate({left:"400px",height:"200px"},3000).delay(1000) delay()方法允许我们将队列中的函数延时执行，它既可以推迟动画队列中函数的执行...(); },function(){ $(this).next().hide(); }) //这种写法在1.9版本的jQuery库里会出现问题总结： (1)一组元素上的动画效果当在一个

4.9K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

jQuery 编程 | jQuery 动画

一、动画jQuery提供了一些列的动画基本方法，同时也提供了自定动画方案.animate()。.show()当提供一个 duration（持续时间）参数，.show()成为一个动画方法。....show()方法将为匹配元素的宽度，高度，以及不透明度，同时进行动画操作。持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。...出了上述时间，还可以自定时间，接受毫秒为参数jQuery默认只提供两个缓冲效果：调用 swing, 在一个恒定的速度进行；调用 linear....("slow"); } else { $("div").slideUp(); }});复制代码.delay()设置一个延时来推迟执行队列中后续的项。...$("div.first").slideUp(300).delay(800).fadeIn(400);复制代码.clearQueue()从列队中移除所有未执行的项。

9.3K4 0

05-老马jQuery教程-动画

跟jQuery的选择器和事件配合起来，可以实现很多很绚的效果，而且简单易用兼容性好。 1. 显示动画 jQuery的原型上的方法 show()方法可以实现让DOM元素进行显示动画。...这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。参数跟show保持一致，不再赘述。...只有使用了插件来提供这个“easein”函数，这个参数才起作用。...延迟执行语法：delay(duration,[queueName]) 概述设置一个延时来推迟执行队列中之后的项目。用于将队列中的函数延时执行。...// $('#foo').slideUp(300).delay(800).fadeIn(400); 12. jQuery动画属性设置关闭页面上所有的动画 jQuery.fx.off

3.3K5 0

jQuery动画，案例

显示、隐藏动画 1.显示动画 show([s,[e],[fn]]) 内部实现原理根据当前操作的元素是块级还是行内决定, 块级内部调用display:block;,行内内部调用display:inline...// 注意: 这里的时间是毫秒 $("div").show(1000, function () { // 作用: 动画执行完毕之后调用 alert("显示动画执行完毕...中提供的集中简单的固定动画无法满足我们的需求, 所以jQuery还提供了一个自定义动画方法来满足我们复杂多变的需求 animate(p,[s],[e],[fn]) /* 第一个参数: 接收一个对象, 可以在对象中修改属性...主要利用已有的图片素材，通过jQuery的事件监听，节点操作，来实现一个微博界面的发布，删除，点赞等功能，主要处理了排版的问题实现代码 HTML 如果有一天我要去流浪 <p class

6.4K1 0

网站开发常用jQuery插件总结(十)菜单插件superfish

jQuery 插件：Superfish 菜单插件简介Superfish 是一个基于 jQuery 的强大、灵活、易于使用的多级下拉菜单插件，常用于网页开发中创建响应式、富有互动性的导航菜单。...嵌套的用于定义子菜单。3. 初始化 Superfish 插件在页面加载完成后，通过 jQuery 初始化 Superfish 插件。...// 动画速度 delay: 200 // 鼠标移开后延迟隐藏的时间});php144 Bytes© 菜鸟-创作你的创作Superfish 插件的常用选项animation：控制子菜单显示时的动画效果...示例：animation: {opacity: 'show', height: 'show'} 表示通过渐显和高度变化来显示子菜单。speed：设置动画的持续时间。...delay：设置鼠标悬停后子菜单延迟显示的时间，单位为毫秒。示例：delay: 200 表示鼠标悬停 200 毫秒后显示子菜单。

6110 0

Bootstrap 提示工具（Tooltip）插件

当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。...锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。...例如，如果 placement 是 "auto left"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。...delay number | object默认值：0 data-delay 延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。...如果提供的是对象，结构如下所示： delay: { show: 500, hide: 100 } container string | false默认值：false data-container 向指定元素追加提示工具

5991 0

Laravel项目全站接入ajax

pajx: 在不刷新页面的状态下改变url地址 ?...jquery.pjax/2.0.1/jquery.pjax.min.js"> //定义加载区域 $(document....pjax.defaults.timeout = 12000; //显示加载动画 $(document).on('pjax:click', function () { $("#loading").show...: -1.1s; animation-delay: -1.1s; } #loading .spinner .rect3 { -webkit-animation-delay: -1s; animation-delay...composer require spatie/laravel-pjax composer引入laravel-pjax 在 app/Http/Kernel.php 文件添加 protected $middleware

7634 0

又一个布局利器， CSS 伪类 :placeholder-shown

简单来说就是当输入框的placeholder内容显示的时候，输入框干嘛干嘛。兼容性如下，在移动端没什么问题 ? placeholder-show是如何工作的？...注意一些奇怪的问题?-我们设置 color: green，但没有作用用。这是因为:placeholder-shown仅会针对input本身。...我注意到有一些其他的属性，如果应用::placeholder-shown，也会影响placeholder的样式。...这里看似empty起作用了，因为我们看到的是粉红色边框，但这实际上不起作用? 之所以显示粉红色，是因为伪类增加了 css 的权重。...在这里，我们可以在输入不是空的情况下进行定位。

3.1K2 0

jQuery实现网页右下角悬浮层提示

最近有同事提到类似网页右下角的消息悬浮提示框的制作。我之前也做过一个类似的例子，很简单。是仿QQ消息。...现在感觉之前的那个例子只是说了实现原理，整体上给你的感觉还是太丑，今天为大家带来一个新的例子。是Discuz右下角悬浮层提示的。运行效果如下： ? 代码如下： <!...);; } else{//调用jquery.fixed.js,解决ie6不能用fixed $('#pop').show();...内容简介 new Pop("这里是标题，哈哈", "http://www.xttblog.com", "欢迎大家关注我的博客... 欢迎大家关注我的个人博客

4.5K2 0

页面点击特效

_list = $('#cnblogs_post_body h3'); //博客园的正文的div的id为cnblogs_post_body，然后查找下面所有的h3 if (jquery_h3...点击隐藏目录，再次点击显示目录">阅读目录'; content += ''; //循环所有的h3，然后在h3...的前面添加回到顶部的功能。...function DivHide() { if ($("#Catalog").css("display") == "none") { $("#Catalog").show...我的衣服又瘦了。", "听君一席话，回家烤白薯。", "流氓不可怕，就怕流氓有文化。", "知识就像内裤，看不见但很重要。", "为了祖国下一代，再丑也得谈恋爱。"

3.5K2 0

Web前端JQuery入门实战案例

jquery api 文档开发环境，测试环境，生产环境 git svn $(function(){ // 写jquery入口函数的第二种方法 }); jq对象和Dom对象 ...选择器是jquery提供的一组方法，用来方便我们找页面中的元素，jquery选择器返回的是jquery对象。...delay(duration,[queueName]); 设置一个延时效果 duration, [queueName] duration:延时时间 queueName:队列名词延时 <style...} $(document).say(); // 链式编程 $.fn.say = function(){ console.log("dashu"); return this; } 结言好了，欢迎在留言区留言...90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通简书博客：达叔小生 https://www.jianshu.com/u/c785ece603d1 结语下面我将继续对其他知识

4.7K1 0

Bootstrap 弹出框（Popover）插件

锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。...如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。...例如，如果 placement 是 "auto left"，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。...delay number | object默认值：0 data-delay 延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。...如果提供的是对象，结构如下所示： delay: { show: 500, hide: 100 } container string | false默认值：false data-container 向指定元素追加弹出框

5321 0

jquery基础教程之动画效果

jquery基础教程之动画效果一、显示隐藏 1、show([speed,[easing],[fn]]) 显示隐藏的匹配元素。...speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) fn:在动画完成时执行的函数，每个元素执行一次。...params:一组包含作为动画属性和终值的样式属性和及其值的集合，不支持color $("p").animate({ left: 50, opacity: 'show',...height:200, marginLeft:100 }, 500); 六、delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目。...$('#foo').slideUp(300).delay(800).fadeIn(400);

1.4K2 0

05-老马jQuery教程-动画

跟jQuery的选择器和事件配合起来，可以实现很多很绚的效果，而且简单易用兼容性好。 1. 显示动画 jQuery的原型上的方法 show()方法可以实现让DOM元素进行显示动画。...) fn:在动画完成时执行的函数，每个元素执行一次。...这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。参数跟show保持一致，不再赘述。...延迟执行语法：delay(duration,[queueName]) 概述设置一个延时来推迟执行队列中之后的项目。用于将队列中的函数延时执行。他既可以推迟动画队列的执行，也可以用于自定义队列。...// $('#foo').slideUp(300).delay(800).fadeIn(400); 12. jQuery动画属性设置关闭页面上所有的动画 jQuery.fx.off

3.3K0 0

使用jQuery

jQuery概述 Write Less Do More（用更少的代码来完成更多的工作）使用CSS选择器来查找元素（更简单更方便）使用jQuery方法来操作元素（解决浏览器兼容性问题、应用于所有元素并施加多个方法...）引入jQuery 下载jQuery的开发版和压缩版从CDN加载jQuery jquery/3.3.1/jquery.min.js..."> window.jQuery || document.write('jquery-3.3.1.min.js...) / outerWidth() / outerHeight() 位置相关：offset() / position() / scrollLeft() / scrollTop() 特效和动画基本动画：show...消失出现：fadeIn() / fadeOut() / fadeTo() / fadeToggle() 滑动效果：slideDown() / slideUp() / slideToggle() 自定义：delay

1.9K2 0

WEB入门之十八动画特效

核心技能部分 8.1 显示/隐藏动画在DOM中，可以通过样式属性display来控制元素的显示和隐藏，但是这没有动画效果。jQuery提供了实现显示/隐藏动画的函数，详见表8-1-1所示。...显示/隐藏 Ø fast：快速（在200毫秒内）显示/隐藏 Ø 自定义数字：开发人员可以自己设置一个数字表示速度，单位毫秒下面通过一个示例来演示show和hide函数的用法，参考代码如下所示。...除了show和hide函数外，jQuery还提供了一个显示/隐藏切换动画函数toggle。该函数可以自动进行显示/隐藏的切换，同样可以使用一个参数来设置动画速度。...8.1 滑动动画滑动动画主要是控制元素的高度在指定时间内从有到无或从无到有，jQuery中实现滑动动画的函数见表8-1-2所示。...那么，jQuery也充分考虑到了这一点，为我们提供了能实现自定义动画的animate()和delay函数，见表8-1-4所示。

1.9K1 0

WEB入门之十八动画特效

核心技能部分 8.1 显示/隐藏动画在DOM中，可以通过样式属性display来控制元素的显示和隐藏，但是这没有动画效果。jQuery提供了实现显示/隐藏动画的函数，详见表8-1-1所示。...显示/隐藏 Ø fast：快速（在200毫秒内）显示/隐藏 Ø 自定义数字：开发人员可以自己设置一个数字表示速度，单位毫秒下面通过一个示例来演示show和hide函数的用法，参考代码如下所示。...除了show和hide函数外，jQuery还提供了一个显示/隐藏切换动画函数toggle。该函数可以自动进行显示/隐藏的切换，同样可以使用一个参数来设置动画速度。...8.1 滑动动画滑动动画主要是控制元素的高度在指定时间内从有到无或从无到有，jQuery中实现滑动动画的函数见表8-1-2所示。...那么，jQuery也充分考虑到了这一点，为我们提供了能实现自定义动画的animate()和delay函数，见表8-1-4所示。

1.8K1 0

情人节程序员用HTML网页表白【告白模板】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

="0.5s">我们的爱情delay="0.7s">我们才刚开始，这东西是为你准备的,话是我偷的,但是我喜欢你是真的的意外，让我遇到了这么好的你。...我明白你对我付出了最大的耐心、包容心、关心......你的心情总会因为我而变化，我很抱歉在未来的日子你还会受这份苦，亲爱的，我们还太年轻未来还有很长的路要走。...="0.5s">送你的表白视频delay="0.7s">所有美好的记忆，我都会保存下来，等我们老了，再一起回忆。...'>---三、精彩专栏看到这里了就【点赞，关注，收藏】三连支持下吧，你的支持是我创作的动力。

3.2K3 0

这 5 个前端组件库，可以让你放弃 jQuery UI

既可以在单个软件包中下载jQuery UI的所有元素，也可以选择只下载感兴趣的组件和功能。使用这样的控件集能够为组件创建出一致的外观，并允许以更少的投入快速创建出应用。...虽然jQuery UI能起到很好的作用，但是还有其它的一些框架，拥有很好的高品质控件。在这篇文章中，将会分析其中的几个框架并做比较。...与其它框架不同的是，这些小部件仅使用JS，并且是从头开始构建的，根本不需要jQuery。即使在移动设备上查看，组件也是快速，平稳并且稳定的。说到移动设备，这也是Kendo UI擅长的领域之一。...有趣的一点是，Wijmo 5构建在更现代化的标准之上，因此在IE8上不起作用，此时就需要Wijmo的旧版本。Wijmo 3是基于jQuery，所以它支持直到在IE6上使用。...虽然这个框架与jQuery UI共享一些组件，但Webix扩展了jQuery UI并提供了一些不同于jQuery UI中常用的组件。 Webix文档具有很好的帮助作用。

8.3K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭