jquery div提示框漸隱彈出與隱藏效果

更新時(shí)間：2010年05月27日 12:36:01 作者：

animate彈出后，調(diào)用out函數(shù)消失。

<!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   class="monsj7c"   id="note"><a href="http://www.dhdzp.com" target="_blank">腳本之家</a></div> <input type="button" value="點(diǎn)我，30s后消失" /> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

jquery監(jiān)聽(tīng)div內(nèi)容的變化具體實(shí)現(xiàn)思路
在開(kāi)發(fā)過(guò)程中遇到了上面標(biāo)題列出的問(wèn)題：如何監(jiān)聽(tīng)div內(nèi)容的變化，下面是具體的解決思路，感興趣的朋友可以參考下
2013-11-11
jQuery插件slicebox實(shí)現(xiàn)3D動(dòng)畫圖片輪播切換特效
Slicebox是一款效果非常華麗的jquery和css3 3d幻燈片插件。Slicebox幻燈片插件能夠?qū)D片切片，然后做3d旋轉(zhuǎn)。Slicebox幻燈片插件共有4種效果，視覺(jué)沖擊感非常強(qiáng)。
2015-04-04
jQuery學(xué)習(xí)筆記之 Ajax操作篇（一） - 數(shù)據(jù)加載
Ajax 通俗來(lái)講即不需要刷新頁(yè)面即可從服務(wù)器或客戶端上加載數(shù)據(jù)，當(dāng)然這些數(shù)據(jù)的格式是多種多樣的。
2014-06-06
EasyUI為Numberbox添加blur事件的方法
這篇文章主要介紹了EasyUI為Numberbox添加blur事件的方法 ,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
移動(dòng)端JQ插件hammer使用詳解
本文給大家介紹的是一款移動(dòng)端下的jQuery插件Hammer.js，他是一個(gè)開(kāi)源的，輕量級(jí)的javascript庫(kù)，它可以在不需要依賴其他東西的情況下識(shí)別觸摸，鼠標(biāo)事件支持各種手機(jī)事件，比如縮放，qq左滑動(dòng)刪除，放大，旋轉(zhuǎn)等
2015-07-07
jQuery ui autocomplete選擇列表被Bootstrap模態(tài)窗遮擋的完美解決方法
這篇文章主要介紹了jQuery ui autocomplete選擇列表被Bootstrap模態(tài)窗遮擋的完美解決方法,本文介紹的非常詳細(xì)，解決過(guò)程思路明了，需要的朋友可以參考下
2016-09-09
jquery增加和刪除元素的方法
這篇文章主要介紹了jquery增加和刪除元素的方法,涉及append、remove等方法的使用技巧,需要的朋友可以參考下
2015-01-01
推薦11款jQuery開(kāi)發(fā)的復(fù)選框和單選框美化插件
web開(kāi)發(fā)中所有的輸入控件中復(fù)選框和單選框的樣式是最難去設(shè)計(jì)的，因?yàn)椴煌臑g覽器及其操作系統(tǒng)對(duì)于樣式的渲染展現(xiàn)是不一樣的。
2011-08-08
jquery判斷RadioButtonList和RadioButton中是否有選中項(xiàng)示例
用jquery判斷RadioButtonList和RadioButton中是否有選中項(xiàng)，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
2013-09-09
jquery實(shí)現(xiàn)心算練習(xí)代碼
實(shí)現(xiàn)代碼的過(guò)程中，有兩個(gè)問(wèn)題很棘手，一個(gè)是開(kāi)始按鈕連續(xù)單擊，計(jì)時(shí)時(shí)間會(huì)迅速加快；二是如何判定玩家單擊哪個(gè)按鈕。
2010-12-12