`
wuyizhong
  • 浏览: 50729 次
  • 性别: Icon_minigender_2
  • 来自: 南京
社区版块
存档分类
最新评论

jquery如何实现过几秒消失的标签提示

阅读更多

 

<head> 
<style> 
   .quick-alert{ 
   width: 50%; 
   margin: 1em 0; 
   padding: .5em; 
   background: #ffa; 
   border: 1px solid #a00; 
   color: #a00; 
   font-weight: bold; 
} 
</style> 
<script src="jquery.js"></script> 
<script type="text/javascript"> 
    function fade() 
{ 
    //停留2秒后消失,在停留的时候,透明度为1.0什么都不做 
    $('<div id="add" class="quick-alert">我是添加进来的</div>').insertAfter($("#example")).animate({opacity: 1.0}, 2000).fadeOut("slow",function(){ 
   //隐藏时把元素删除 
   $(this).remove(); 
}); 
} 
</script> 
</head> 
<body> 
    <div id="example" class="quick-alert"> 
   q 
</div> 

</br> 
<input type="button" onclick="fade();"> 
</body>
分享到:
评论

相关推荐

    Jquery实现鼠标移上弹出提示框、移出消失思路及代码

    在今天的知识分享中,我们将探讨如何利用JQuery实现一个常见的网页交互效果:鼠标移上元素时弹出提示框,鼠标移出时提示框消失。这一交互功能在用户界面设计中非常实用,能够有效地为用户提供额外的信息或说明。 ...

    jQuery实例-信息提示jQuery实现

    本实例将详细讲解如何利用jQuery实现信息提示功能,这一功能在用户交互中扮演着重要角色,能有效地向用户提供反馈信息。 首先,我们需要引入jQuery库。在HTML文件的`&lt;head&gt;`标签内,通过`&lt;script&gt;`标签从CDN(内容...

    jquery 实现的漂亮的弹框提示

    在本教程中,我们将探讨如何利用 jQuery 实现一个美观且功能丰富的弹框提示功能,通常这样的功能可以用于确认操作、显示警告或者提供用户信息。 首先,让我们了解 `jQuery confirm` 的概念。在传统的 JavaScript 中...

    jquery实现输入框邮箱提示效果

    "jQuery实现输入框邮箱提示效果"就是一种常见的增强用户交互的方法。这个功能在用户输入邮箱地址时,会在输入框下方动态显示一些常见邮箱服务商的建议,如163、QQ、gmail等,帮助用户快速完成邮箱地址的输入。 ...

    jquery tips提示图片信息.rar

    本资源“jquery tips提示图片信息.rar”显然聚焦于利用jQuery实现一种图片提示信息的功能,这通常涉及到图片展示、用户交互以及可能的动画效果。以下是关于这个主题的详细知识点: 1. jQuery选择器:jQuery的选择器...

    jQuery右下角消息提示框

    // 显示2秒后自动消失 ``` 5. **可选功能**:为了提供关闭窗口和不再提示的功能,可以添加额外的按钮和cookie存储。例如,添加一个“关闭”按钮,监听点击事件并删除消息。同时,使用JavaScript的`localStorage`...

    Jquery实现关键字滑动效果和层气泡提示特效实例源码

    本文将深入探讨如何使用jQuery实现关键词滑动效果和层气泡提示特效,这两个功能在网页动态交互中非常常见,可以提升用户体验。 首先,让我们分析“关键词滑动效果”。这种效果通常用于展示滚动的新闻标题、广告或...

    bootstrap提示框定时消失

    为了实现提示框定时消失,我们需要借助于 JavaScript 或 jQuery。jQuery 是一个轻量级的 JavaScript 库,使得 DOM 操作、事件处理和动画变得更加简单。通过 jQuery,我们可以添加自定义的 JavaScript 代码来实现定时...

    jQuery制作图片标注提示信息插件

    首先,从标题“jQuery制作图片标注提示信息插件”来看,我们关注的核心功能是实现图片上的标注和提示信息。这种功能在网页设计中常用于为用户提供更直观的信息,例如在地图应用中标识地点、在产品展示中解释特定细节...

    jQuery CSS3漂亮的tooptip提示框动画特效

    1. **HTML结构**:在HTML文档中,需要为每个需要提示信息的元素添加额外的属性或数据标签,这些标签会被jQuery用来识别并添加提示框内容。 2. **CSS样式**:CSS文件(可能命名为`tooltip.css`)定义了提示框的外观,...

    jquery 鼠标提示例子

    标签"jquery 鼠标提示 简单例子"进一步强调了这是一个初级级别的示例,专注于基本的提示功能实现,不涉及复杂的交互逻辑或高级特性。 综上所述,通过学习和理解这个"jquery 鼠标提示例子",开发者可以提高在jQuery...

    JQuery实现火箭升空效果的404页面

    这段代码会让火箭在2秒内向上移动至页面中心,并逐渐透明,模拟火箭升空消失在视线之外。 5. **事件绑定**:为了触发火箭升空动画,我们可以监听页面加载事件或特定按钮的点击事件。例如,使用`$(document).ready...

    jquery 提示信息显示后自动消失的具体实现

    以下将详细介绍如何利用jQuery实现提示信息显示后自动消失的功能。 首先,我们来探讨两种不同的方法: **方法一:使用`show()`、`delay()`和`hide()`方法** ```javascript $("#errormsg").html("您的信息输入错误...

    html jquery 自定义提示框

    // 提示框将在3秒后自动消失 ``` 关于“懒人原生手机客户端提示信息效果(可自定义内容、显示时间)”,这可能是指一个适用于移动设备的提示框实现,它不仅允许用户自定义显示的内容,还可以调整显示时间。在移动端...

    多颜色提示jQuery插件GIPS.zip

    在网页中,当用户鼠标悬停在某个元素上时,GIPS插件会显示相关的提示信息,而当鼠标移开后,这些提示会自动消失,这提升了用户体验,使得信息传递更为高效且不打扰用户浏览。 【标签】“JS特效-其它代码”暗示了...

    jquery随鼠标移动的提示插件

    本文将详细探讨“jQuery随鼠标移动的提示插件”,该插件广泛应用于各种元素,如`&lt;a&gt;`标签、`&lt;input&gt;`、`&lt;button&gt;`以及表格元素,提供灵活且实用的提示功能。 一、jQuery基础 在深入插件之前,我们需要对jQuery有...

    jquery toast信息提示

    **jQuery Toast信息提示工具** 在Web开发中,为了提供用户友好的交互体验,信息提示功能是必不可少的。jQuery Toast就是这样一款工具,它模仿了Android系统的Toast功能,可以在网页上快速、简便地显示提示信息,...

    jquery渐隐渐现鼠标提示效果

    在本教程中,我们将深入探讨如何利用jQuery实现这种鼠标提示效果。 首先,我们需要理解jQuery的基本用法。jQuery库通过引入`&lt;script&gt;`标签到HTML文档中来引用,如`&lt;script src="https://code.jquery....

    jQuery实现实用的动态信息提示框tips效果可用在超级链接或图片上.zip

    4. **jQuery代码**:编写JavaScript代码以实现提示框的动态显示和隐藏。利用jQuery的`mouseenter`和`mouseleave`事件监听用户的鼠标行为。 ```javascript $(document).ready(function() { $('.tip').on('mouse...

    Jquery提示层效果-用户体验比较好的哦

    标题中的“Jquery提示层效果”指的是在网页中使用jQuery库实现的一种交互设计,它能够为用户提供更加友好和直观的信息提示。这种效果通常用于当用户将鼠标悬停在某个元素(如新闻链接)上时,会弹出一个层(或者叫做...

Global site tag (gtag.js) - Google Analytics