可展開收起效果的網站提示框

分別用JavaScript和jQuery寫了滑動效果的網站提示。

用jQuery很簡單，用 animate() 方法就可以了。

用JavaScript稍微複雜一點，需要用到定時器實現動畫效果，並且要考慮到鼠標多次移入“提示”時會開啓多個定時器，則要清除定時器的情況。

效果如圖：

收起時：  展開時： 

HTML：

<div id="cue-hide"><span id="cue-show">小貼士 </span><p>用JavaScript和jQuery分別寫滑動效果的網站提示。</p></div>

JavaScript：

/*JavaScript*/
window.onload=function(){
	var cdiv=document.getElementById("cue-hide");
	cdiv.onmouseover=function(){
		cueshow();
	};
	cdiv.onmouseout=function(){
		cuehide();
	};
}
var timer=null;
function cueshow(){
	clearInterval(timer);
	var cdiv=document.getElementById("cue-hide");
	timer=setInterval(function(){
		if(cdiv.offsetLeft==0){
			clearInterval(timer);
		}else{
			cdiv.style.left = cdiv.offsetLeft+25+'px'; 
		}
	},50);
};
function cuehide(){
	clearInterval(timer);
	var cdiv=document.getElementById("cue-hide");
	timer=setInterval(function(){
		if(cdiv.offsetLeft==-200){
			clearInterval(timer);
		}else{
			cdiv.style.left = cdiv.offsetLeft-25+'px'; 
		}
	},50);
};

jQuery：

$(document).ready(function(){
	$("#cue-hide").mouseenter(function(){
		$("#cue-hide").animate({left:"0px"},"slow"); 
	});
	$("#cue-hide").mouseleave(function(){
		$("#cue-hide").animate({left:"-200px"},"slow"); 
	});
});