本文實例講述了jQuery實現的鼠標響應緩沖動畫效果。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體代碼如下：
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>js動畫-緩沖動畫</title><script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script><style>* { margin: 0; padding: 0; font-family:"微軟雅黑"}#box{ height:100px; width:100px; background-color:#0099CC; margin-top:200px; position:relative; /*速速、緩沖變化*/ left:-100px;}span{ display:block; color:blue; width:25px; height:100px; background-color:#FFFF99; position:absolute; left:100px;}</style></head><body> <div id="box"> <span>移動</span> </div><script>window.onload=function(){ var div1=document.getElementById("box"); div1.onmouseover=function(){ startMove(0); } div1.onmouseout=function(){ startMove(-100); }}var timer=null;function startMove(itarget){ clearInterval(timer); var div1=document.getElementById("box"); timer=setInterval(function(){ var speed=(itarget-div1.offsetLeft)/20; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(div1.offsetLeft==itarget){ clearInterval(timer); }else{ div1.style.left=div1.offsetLeft+speed+"px"; } },30)}</script></body></html>更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
