首先非常感谢网友czqn8的无私分享，此作品也是他从天猫商城网站中整理出来分享给大家的，实现了jquery鼠标悬浮图文切换特效，当鼠标悬浮到图片时就马上显示滑出遮罩层的文字描述内容切换，鼠标离开时就隐藏文字描述遮罩层。。。
实现的jquery功能代码如下：
$(function(){
var oBig = $('#box .big');
var oBigKeep = oBig.find('.bigKeep');
var aLi = $('#box ul li');
oBig.hover(function(){
oBigKeep.stop().animate({
opacity:1
},500)
},function(){
oBigKeep.stop().animate({
opacity:0
},500)
})
var oKeep,oTxt;
aLi.hover(function(){
oKeep = $(this).find('.keep');
oTxt = $(this).find('.txt');
oKeep.stop().animate({
opacity:0.8
},300);
oTxt.stop().animate({
left:0,
opacity:1
},200);
},function(){
oKeep.stop().animate({
opacity:0
},300);
oTxt.stop().animate({
left:-170,
opacity:0
},200);
})
})
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友czqn8 图片播放 滑动插件 鼠标悬浮 悬停特效 图片特效 图片遮罩效果 遮罩层