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

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery div提示框漸隱彈出與隱藏效果

編輯：JQuery特效代碼

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

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

上一頁:jquery 彈出公告功能代碼
下一頁:jQuery 練習[一] 學習jquery的准備工作

JQuery特效代碼

解析jquery獲取父窗口的元素: (#父窗口元素ID,window.parent.document); 對應javascript版本為
刪除select中所有option選項jquery代碼: 這樣寫 . 代碼如下: <select id=search> <option>
使用jQuery向asp.net Mvc傳遞復雜json數據-ModelBinder篇: 調用jQuery的ajax方法時,jQuery會根據post或者get協議對參數data進行序列化;

DIV CSS 佈局教程網

相關文章