jquery div提示框渐隐弹出与隐藏效果

更新时间：2010年05月27日 12:36:01 作者：

animate弹出后，调用out函数消失。

<!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/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery div提示框渐隐弹出与隐藏</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style> *{margin:0;padding:0;font-size:12px;} input{width:120px;height:30px;cursor:pointer;} #note{position:absolute;width:400px;padding:20px;background:#eee;border:1px solid #ccc;left:40%;z-index:9999;display:none;} </style> <script> $(function(){ $('input').click(function(){ if(!$('#note').is(':visible')){ $('#note').css({display:'block', top:'-100px'}).animate({top: '+100'}, 500, function(){ setTimeout(out, 3000); }); } }); }); function out(){ $('#note').animate({top:'0'}, 500, function(){ $(this).css({display:'none', top:'-100px'}); }); } </script> </head> <body> <div id="note"><a href="https://www.jb51.net" target="_blank">脚本之家</a></div> <input type="button" value="点我，30s后消失" /> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

jQuery简单实现禁用右键菜单
这篇文章主要介绍了jQuery简单实现禁用右键菜单的方法，非常的简单实用，这里分享给大家，有需要的小伙伴直接拿走使用。
2015-03-03
基于jQuery图片平滑连续滚动插件
彦磊基于jQuery图片平滑滚动插件(2009.04) 在IE6/IE7/Mozilla 5.0（Firefox 3.0.5）中测试通过
2009-04-04
Jquery实现Div上下移动示例
这篇文章主要介绍了Jquery如何实现Div上下移动,需要的朋友可以参考下
2014-04-04
jQuery实现预加载图片的方法
这篇文章主要介绍了jQuery实现预加载图片的方法,涉及jQuery操作img的src属性使用技巧,需要的朋友可以参考下
2015-03-03
Laravel整合Bootstrap 4的完整方案(推荐)
这篇文章主要介绍了Laravel整合Bootstrap 4的完整方案,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-01-01
jquery $.each() 使用小探
jquery each想必大家对此并不陌生吧，它的使用范围还是比较广泛的，下面与大家分享个示例来介绍jquery each的使用方法，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-08-08
jQuery页面弹出框实现文件上传
这篇文章主要为大家详细介绍了jQuery页面弹出框实现文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
jquery中获取元素里某一特定子元素的代码
这篇文章主要介绍了jquery中获取元素里某一特定子元素的代码,需要的朋友可以参考下
2014-12-12
Jquery 实现grid绑定模板
这篇文章主要介绍了Jquery 实现grid绑定模板的相关资料,需要的朋友可以参考下
2015-01-01
JQuery常用选择器功能与用法实例分析
这篇文章主要介绍了JQuery常用选择器功能与用法,结合实例形式分析了jquery常见选择器基本功能、使用方法及操作注意事项,需要的朋友可以参考下
2019-12-12