jQuery实现鼠标响应式透明度渐变动画效果示例

本文实例讲述了框架实现鼠标响应式透明度渐变动画效果。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

！DOCTYPE html html html heartheta charset=' utf-8 '/title js动画-透明度变化/title脚本src=' http :http://libs。百度。com/jquery/1。10 .2/jquery。js '/脚本样式* { margin : 0；padd : 0；字体系列： '微软雅黑} # box { height:100px宽度宽度：100像素背景色-: # 0099 cc；页边距-顶部：200像素；位置：相对；/*透明度变化*/左：0 px滤镜： alpha(opa city 336030)；opa city 33600.3 } span { display : block颜色：蓝色；宽度：25 px高度：100 px背景-颜色： # FFFF99位置：绝对；left :100 px }/style/head body div id=' box ' span移动/span/div脚本窗口。onload=function(){ var div 1=document。getelementbyid(' box ')；1区。onmouseover=function(){ startMove(100)；} div 1。onmouseout=function(){ startMove(30)；} } var timer=nullvar=30；函数startMove(itar get){ clearInterval(计时器);var div 1=文档。getelementbyid(' box ')；timer=setInterval(function(){ var speed=0；if(alpha itar get){ speed=-10；} else { speed=10 } if(alpha==itar get){ clearInterval(计时器);} else { alpha=速度；1区。风格。filter=' alpha(opa city 3360 ' alpha ')'；1区。风格。不透明度=alpha/100；} },100)}/脚本/正文/html更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。