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

2016-02-19 13:04 34 1 收藏

给自己一点时间接受自己,爱自己，趁着下午茶的时间来学习图老师推荐的jquery div提示框渐隐弹出与隐藏效果，过去的都会过去，迎接崭新的开始，释放更美好的自己。

【 tulaoshi.com - Web开发】

!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" / titlejquery 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 diva href="http://www.poluoluo.com" target="_blank"/a/div input type="button" value="点我，30s后消失" / /body /html

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

来源:http://www.tulaoshi.com/n/20160219/1602900.html

上一篇：从一个程序中生成另一个程序(资源法)
下一篇：沧海一粟之垃圾游戏一

看过《jquery div提示框渐隐弹出与隐藏效果》的人还看了以下文章更多>>

jquery div提示框渐隐弹出与隐藏效果 02-19
jQuery DIV弹出效果实现代码 02-19
jquery 弹出公告功能代码 02-19
jQuery animate效果演示 02-19
jQuery 可以拖动的div实现代码 02-19
jQuery AnythingSlider滑动效果插件 02-19
JQuery Dialog(JS 模态窗口,可拖拽的DIV) 02-19
Jquery find与filter函数区别说明 02-19
jquery (show,fadeOut,Animate)简单效果 02-19
Jquery change(fontsize,background) 改变颜色与背景 02-19

jQuery autocomplete插件修改

标签： Web开发

文件打包下载主要修改了两个地方：一、上下选择与输入值同步问题。输入关键字后，当出现了下拉选项，用键盘的上下键选择时，关键字输入框的值，没有与你选择的值同步。插件是老外写的，可能他没有考虑到这一点。二、修正了在firefox下中文输入，没有激活自动提交的问题。老外当然不会用到中文输入，这个bug存在也理所当然...

Jquery 学习笔记（二）

标签： Web开发

选择器从最开始看到Jquery这样的选择器就让我想起了CSS的选择器，简直是同出一辙啊，CSS的选择器语法个人觉得相当的经典，那么Jquery借鉴CSS也就没有多少疑问了。还是复习一下Jquery的选择器吧其中h1为选择器，color:red与background:#d00与声明，两者结合也即{}内称为声明块；color与background称为属性；red与#d00称为值。其中选...

jquery tagname 取得方法

标签： Web开发

如果你查找Jquery的API，会发现这个好象是Jquery的一个盲点，找来找去也没有明确说明用什么办法可以取到HTML标签的名字，如果直接用 $("H1").tagName 这样的方式也无法取到“H1”这样的值，好象只会得到“undifined”。后来发现Jquery居然将tagName也视为属性之一了，有趣。所以用 $("H1").attr("tagName") !DOCTYPE html PUBLIC "-...

JQuery 无废话系列教程(一) jquery入门 [推荐]

标签： Web开发

本文的宗旨, 授人鱼不如授人渔. 我只会讲关键部分,不可能JQuery的每个函数我都讲,因为有很多函数贝壳自己在实际应用中都从未使用过. 但当我们已经会渔了还用担心鱼吗!？ BTW:贝壳假设你已经掌了基本的JavaScript运用能力及基础的CSS知识. JQuery是什么 JQuery只是一个JS文件人对新鲜事业总是报着好奇与排斥的情感,贝壳刚开始学的时...

jquery 简单的图片展示效果

标签： Web开发

html head titlejquery练习——简单的图片结果展示效果--cnblogs libsource//title style #cfoot ul,#cfoot li{ margin:0;padding:0;list-style-type:none; } #cdiv{ width:500px;height:500px;line-height:500px;text-align:center;border:1px solid #D5DDF9;margin:30px;float:left; } #cfoot li{ display:inline-block;width:100px;height:1...

查看更多精彩>>