首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JQuery显示一个div 4秒,然后将其隐藏并显示另一个div 1.4秒,最后在循环中显示第一个包含一些文本的div

要实现这个需求,可以使用JQuery的动画效果和定时器来控制div的显示和隐藏。

首先,需要在HTML文件中引入JQuery库:

代码语言:txt
复制
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

然后,在HTML文件中添加三个div,分别是要显示的div、要隐藏的div和包含文本的div:

代码语言:txt
复制
<div id="showDiv">显示的div</div>
<div id="hideDiv" style="display: none;">隐藏的div</div>
<div id="textDiv">包含文本的div</div>

接下来,在JavaScript代码中使用JQuery来实现动画效果和定时器:

代码语言:txt
复制
$(document).ready(function() {
  // 显示showDiv并延迟4秒后隐藏并显示hideDiv
  $("#showDiv").show().delay(4000).hide(0, function() {
    $("#hideDiv").show();
  });

  // 循环显示textDiv
  setInterval(function() {
    $("#textDiv").toggle();
  }, 1400);
});

解释一下代码的逻辑:

  1. $(document).ready(function() { ... }); 表示当页面加载完成后执行其中的代码。
  2. $("#showDiv").show().delay(4000).hide(0, function() { ... }); 表示先显示showDiv,然后延迟4秒后隐藏showDiv,并在隐藏完成后执行回调函数,其中回调函数中的代码用于显示hideDiv。
  3. setInterval(function() { ... }, 1400); 表示每隔1.4秒执行其中的代码,其中代码用于切换textDiv的显示和隐藏状态。

这样,就实现了JQuery显示一个div 4秒,然后将其隐藏并显示另一个div 1.4秒,最后在循环中显示第一个包含一些文本的div的效果。

关于腾讯云相关产品和产品介绍链接地址,可以根据具体需求选择适合的产品,例如:

  • CDN加速服务:用于加速网站内容分发,提高访问速度。详情请参考:CDN加速服务 -云服务器CVM:提供弹性计算能力,满足不同规模业务的需求。详情请参考:云服务器CVM
  • 云数据库MySQL版:提供高性能、高可靠性的MySQL数据库服务。详情请参考:云数据库MySQL版
  • 人工智能服务:提供多种人工智能能力,如图像识别、语音识别等。详情请参考:人工智能服务
  • 物联网套件:提供物联网设备接入、数据采集、设备管理等功能。详情请参考:物联网套件
  • 移动推送服务:用于向移动设备推送消息和通知。详情请参考:移动推送服务
  • 对象存储COS:提供海量、安全、低成本的云端存储服务。详情请参考:对象存储COS
  • 区块链服务:提供区块链应用开发和部署的一站式解决方案。详情请参考:区块链服务

以上是一些腾讯云的产品示例,具体选择和推荐的产品应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaWeb(八)JQuery

jquery 里面只有一个对象 jQuery == $) 7:出色浏览器兼容性 8:链式操作方式($("#ddd").addClass().removeClass()) 9:隐式迭代 (显示迭代...:完善文档 JQuery加载 从  http://jquery.com/  下载后,复制到项目(路径:WebContent/js)中,然后页面生命: 1 <script type="text/javascript...,<em>然后</em>调用attr()) 3:<em>文本</em>节点 (先找到元素节点<em>然后</em>调用text()) 节点<em>的</em>创建: 元素节点<em>的</em>创建,属性节点,<em>文本</em>节点 <em>jQuery</em> 当中<em>的</em>事件 通常会把 <em>jQuery</em> 代码放到 ...event.result <em>包含</em>由被指定事件触发<em>的</em>事件处理器返回<em>的</em><em>最后</em><em>一个</em>值。 event.target 触发该事件<em>的</em> DOM 元素。...() 逐渐改变被选元素<em>的</em>不透明度,从可见到<em>隐藏</em> fadeTo() 把被选元素逐渐改变至给定<em>的</em>不透明度 hide() <em>隐藏</em>被选<em>的</em>元素 queue() <em>显示</em>被选元素<em>的</em>排队函数 show() <em>显示</em>被选<em>的</em>元素

1.8K40

jQuery中常用函数和属性详细解析

例子 $("#div1").find("p").hide().end().hide() 第一个hide()是对于p标签 然后用end()结束对p标签引用而返回到#div1标签 所以第二个hide(...show( speed, [callback] ) 以优雅动画显示所有匹配元素,并在显示完成后可选地触发一个回调函数。 hide( ) 隐藏所有的匹配元素。...slideDown( speed, [callback] ) 通过高度变化(向下增大)来动态地显示所有匹配元素,显示完成后可选地触发一个回调函数。...标签元素所有的属于同一个父元素div标签 基本过滤选择器 $("tr:first") 匹配第一个选择元素 $("tr:last") 匹配最后一个选择元素 $("input:not(:checked...匹配所有不为空元素(含有文本元素也算) $("div:hidden") 匹配所有隐藏元素,也包括表单隐藏域 $("div:visible") 匹配所有可见元素 属性过滤选择器 $("div[

2.5K10

jQuery Cheat—Sheet(jQuery学习笔记)

函数接受CSS选择符作为参数,充当一个工厂,返回包含页面中对应元素jQuery对象。...jQuery 事件方法语法 jQuery 中,大多数 DOM 事件都有一个等效 jQuery 方法。 页面中指定一个点击事件: $("p").click(); 下一步是定义什么时间触发事件。...当鼠标移动到元素上时,会触发指定第一个函数(mouseenter,); 当鼠标移出这个元素时,会触发指定第二个函数(mouseleave)。...显示隐藏元素,隐藏显示元素: //点击button隐藏p标签,再次点击显示 $("button").click(function(){ $("p").toggle(); }); 淡入和淡出...这意味着如果您在彼此之后编写多个 animate() 调用, jQuery 会创建包含这些方法调用"内部"队列。然后逐一运行这些 animate 调用。

16.2K30

JQuery最全常用方法指南

show(speed, [callback]) 以优雅动画显示所有匹配元素,并在显示完成后可选地触发一个回调函数。 hide() 隐藏所有的匹配元素。...slideUp(speed, [callback]) 通过高度变化(向上减小)来动态地隐藏所有匹配元素,隐藏完成后可选地 触发一个回调函数。...(”#prev ~div”) 同胞选择器,选择prev所有同胞节点 基本过滤选择器 $(”tr: first”) 匹配第一个选择元素 $(”tr: last”) 匹配最后一个选择元素 $(”input...selector所有元素 $(”td: parent”) 匹配所有不为空元素(含有文本元素也算) $(”div: hidden”) 匹配所有隐藏元素,也包括表单隐藏域 $(”div: visible...可以有多个参数(合并多项返回) $.map(array, fn):数组映射。把一个数组中项目(处理转换后)保存到到另一个新数组中,返回生成新数组。

10.9K20

jQuery 教程

“h1,div,p”) 所有 、 和 元素 :first $(“p:first”) 第一个 元素 :last $(“p:last”) 最后一个 元素 :even...:first-of-type选择同一元素名称兄弟中第一个元素。 :last-child选择同父代最后一个子代元素。 :last-of-type选择同一元素名称兄弟中最后一个元素。...() 移除下一个排队函数,然后执行函数 fadeIn() 逐渐改变被选元素不透明度,从隐藏到可见 fadeOut() 逐渐改变被选元素不透明度,从可见到隐藏 fadeTo() 把被选元素逐渐改变至给定不透明度...fadeToggle() fadeIn() 和 fadeOut() 方法之间进行切换 finish() 对被选元素停止、移除完成所有排队动画 hide() 隐藏被选元素 queue() 显示被选元素排队函数... 这是段落一些文本

16.9K20

jQuery

元素,返回包含所有的 DOM 元素 jQuery 对象param 是 DOM 元素:将 DOM 元素对象包装成 jQuery 对象返回(this)param 是标签字符串: 创建标签 DOM 元素对象包装为..., value) 设置一个样式 css(多个样式对) 设置多个样式 代码示例: 取得第一个段落 color 样式属性值。...jQuery 对象内部元素中找出部分匹配元素, 封装成新 jQuery 对象返回 方法 描述 first() 获取第一个元素 last() 获取最后个元素 eq(index) 获取第 N 个元素...方法 描述 children(selector) 取得一个包含匹配元素集合中每一个元素所有子元素元素集合。...1.基本动画 方法 描述 show() 将隐藏元素显示 hide() 将可见元素隐藏 toggle() 可见就隐藏,不可见就显示 以上动画都可以添加参数: ① 第一个参数就是显示 执行时间,以毫秒为单位

10.8K20

与Ajax同样重要jQuery(1)

③:基本过滤选择器 :first 选取第一个元素 $("tr:first") :last 选取最后一个元素 $("tr:last") :not(selector) 去除所有与给定选择器匹配元素 $("...动画完成时执行函数 ④:内容过滤选择器 内容选择器是对子元素和文本内容操作 :contains(text) 选取包含text文本内容元素 $("div:contains...² 设置含有文本内容 ”传智播客” div 字体颜色为红色 ² 设置没有子元素div元素 文本内容 ”这是一个DIV“ ² 设置包含p元素 div 背景色为黄色 ² 设置所有含有子元素...: ² 为表单中所有隐藏域 添加 class属性,值为itcast ² 设置table所有 可见 tr 背景色 黄色 ² 设置table所有 隐藏tr 字体颜色为红色,显示出来 ,输出tr中文本值 <...区别 eq :first-child 选取第一个子元素 :last-child 选取最后一个子元素 :only-child 选取唯一子元素,它父元素只有它这一个子元素 练习7: ² 选择id属性mytable

10K60

学习jQuery这一篇就够了

IE8 及以下版本不支持 文件较小,执行效率更高 3.x 完全不再支持 IE8 及以下版本 提供了一些 API 提供不包含 AJAX / 动画 API 版本 # 1.4 jQuery 引入方式...jQuery 核心对象:即执行 jQuery 核心函数返回对象,jQuery 对象内部包含是 dom 元素对象伪数组 (可能只有一个元素),jQuery 对象拥有很多有用属性和方法,让程序员能方便操作...注意:如果存在(不存在)就删除(添加)一个样式类 需求描述:当单击按钮时候,隐藏 div,再次单击按钮时候,显示 div .hide { width: 100px; height...需求描述:创建一个显示 div然后隐藏该元素 .box { width: 200px; height: 200px; background: coral; display...需求描述:创建一个隐藏 div然后显示该元素 .box { width: 200px; height: 200px; background: coral; display

81050

Web前端基础(06)

DOM相关内容jQuery框架中基本实现了全覆盖,所以只需要掌握jQuery框架使用方式即可 ###jQuery框架 这是一个通过js语言所写框架,对原生js语言进行封装,作用:提高开发效率...匹配第一个div $(“div:last”) 匹配最后一个div $(“div:eq(n)”) 匹配下标为ndiv 从0开始 $(“div:lt(n)”) 匹配下标小于ndiv $(“div:gt...contains(‘xxx’)”) 匹配包含xxx文本div 可见选择器 $(“div:visible”) 匹配所有显示div $(“div:hidden”) 匹配所有隐藏div 显示隐藏相关方法...() 所有兄弟 .siblings() 父元素 .parent() 子元素们 .children() 过滤选择器 第一个 div:first 最后一个 div:last 第n个 div:eq(n) 小于...empty 非空元素 div:parent 包含文本元素 div:contains(xxx) 可见选择器 所有可见元素 div:visible 所有不可见 div:hidden 相关方法: 显示.show

2.7K20

BootStrap应用开发学习入门

HTML5 元素和 CSS 属性满足一些新特性: BS设计目标是移动设备优先然后才是桌面设备; BS全局显示、排版和链接 响应式布局以及图像响应式 BS支持跨浏览器一致性:使用了 Normalize.css...这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。 WeiyiGeek. 列表BS中支持有序列表、无序列表和定义列表。....form-control-static #一个水平表单内表单标签后放置纯文本时 .help-block #灰色显示表单帮助文本标签 #验证状态 .has-warning、 .has-error...嵌套: 您可以一个按钮组内嵌套另一个按钮组,即,一个 .btn-group 内嵌套另一个 .btn-group 。....text-danger #"#text-danger" 类文本样式 .text-hide #将页面元素所包含文本内容替换为背景图(文本隐藏) #背景颜色,文本是个链接鼠标移动到文本上会变暗

17.4K20

杨老师课堂之Jquery筛选,事件,效果,Ajax,javascript跨域)

•-index:一个整数,指示元素位置,从集合中最后一个元素开始倒数。...(1算起) first(),获取第一个元素 last(),获取最后个元素 hasClass(class),检查当前元素是否含有某个特定类,如果有,则返回true。...,然后把这些元素放进一个临时集合中,再用给定选择器表达式去过滤; 3,前者返回0或1个元素,后者可能包含0个,1个,或者多个元素。...件对象一些属性程序中使用事件对象非常简单,只需要为函数添加一个参 数....跨域:一个服务器上,去访问另一个服务器 jQuery如何实现跨域请求?使用JSONP形式实现跨域。 javascript如果调用另一个域程序,不能执行当前域js函数。

8.2K20

BootStrap应用开发学习入门

HTML5 元素和 CSS 属性满足一些新特性: BS设计目标是移动设备优先然后才是桌面设备; BS全局显示、排版和链接 响应式布局以及图像响应式 BS支持跨浏览器一致性:使用了 Normalize.css...这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。 WeiyiGeek. 列表BS中支持有序列表、无序列表和定义列表。....form-control-static #一个水平表单内表单标签后放置纯文本时 .help-block #灰色显示表单帮助文本标签 #验证状态 .has-warning、 .has-error...嵌套: 您可以一个按钮组内嵌套另一个按钮组,即,一个 .btn-group 内嵌套另一个 .btn-group 。....text-danger #"#text-danger" 类文本样式 .text-hide #将页面元素所包含文本内容替换为背景图(文本隐藏) #背景颜色,文本是个链接鼠标移动到文本上会变暗

14.5K30

jQuery基础图文系列

:disabled 选择每个禁用input元素 :checked 选择每个选中input元素 :first-child 选择某个元素第一个元素 :last-child 选择某个元素最后一个子元素...类型 :nth-last-of-type() 和 nth-last-child() 类似,从最后一个子元素开始算 :first-of-type 选择一个上级元素第一个同类子元素 :last-of-type...find() 获取当前匹配元素集合中每个元素后代,由选择器进行筛选 .first() 将匹配元素集合缩减为集合中 第一个元素 .has() 将匹配元素集合缩减为包含特定元素后代集合 .is()...() 把所有匹配元素用指定内容或元素包裹起来 wrapinner() 将每一个匹配元素子内容用指定内容或元素包裹起来 jQuery hide() 和 show()隐藏显示 HTML 元素...$("p").remove();//删除所有p标签 查找元素 $("p").find("span")//查找p标签下span标签 显示隐藏匹配元素 $("p").show();//显示p标签 隐藏显示元素

4.4K10

Web阶段:第五章:JQuery

"); }); }); 内容过滤器 :contains(text) 匹配包含给定文本元素 :empty 匹配所有不包含子元素或者文本空元素 :parent 匹配含有子元素或者文本元素 :has...> Jquery动画 基本动画 show() 显示隐藏元素 第一个参数是 动画执行时候...,(单位是毫秒) 第二个参数是 动画执行完成时回调函数 hide() 隐藏可见元素 第一个参数是 动画执行时候,(单位是毫秒) 第二个参数是 动画执行完成时回调函数 toggle() 可见就隐藏...,隐藏状态就显示 第一个参数是 动画执行时候,(单位是毫秒) 第二个参数是 动画执行完成时回调函数 淡入淡出动画 fadeIn() 淡入 让隐藏可见 fadeOut() 淡出 让可见消失 fadeTo...2.当显示全部内容时候,按钮文本为“显示精简品牌” 然后,小三角形向上。所有品牌产品为默认颜色。 3.当只显示精简品牌时候,要隐藏卡西欧之后品牌,按钮文本为“显示全部品牌” 然后小三形向下。

26.1K20

jQuery(一)

栗子 找到所有拥有details类p元素,将其高亮显示, $('p.datails').css('background-color', 'yellow') jQuery()函数 Jquery中为最终要为...通过这种方法调用,$()会返回当前文档中匹配该选择器元素集。 第二种 传递一个Element,Document或Window对象给$()方法,$()将会将其封装成对象返回。...即 $(document) 或 $(this) 使用这种方法可以完成对节点操作 第三种 传递字符串文本给$()方法,jQuery将会根据传入文本创建好HTML元素,然后将其封装为jQuery对象返回...div中 $('a').clone().appendTo('#linklist'); // clone不会复制事件处理程序 // 一个链接后插入元素,使其能独立显示 $("#linklist...').wrap(''); // 将所有的其他段落包装在另一个div里 $('body > p:not(:first

2.1K40
领券