本文實例講述了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:0px; filter:alpha(opacity:30); opacity:0.3;}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(100); } div1.onmouseout=function(){ startMove(30); }}var timer=null;var alpha=30;function startMove(itarget){ clearInterval(timer); var div1=document.getElementById("box"); timer=setInterval(function(){ var speed=0; if(alpha>itarget){ speed=-10; }else{ speed=10; } if(alpha==itarget){ clearInterval(timer); }else{ alpha+=speed; div1.style.filter="alpha(opacity:"+alpha+")"; div1.style.opacity=alpha/100; } },100)}</script></body></html>更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
