分别用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"); ????});});可展开收起效果的网站提示框
原文地址：https://www.cnblogs.com/hello-my-world/p/10293866.html