hello_my_world

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

/*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);
};

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