jquery淡入淡出效果如何实现?图片淡入淡出的例子
本文导语: 例子,jquery实现图片淡入淡出效果。 代码示例: jquery淡入淡出效果_www. .box{ margin:auto 0; width:302px; height:auto; background:#ccc; text-align:left;} .box_son{ float:left;width:100px; height:100px; background:#999; margin-top:1px; text-align:center; ...
例子,jquery实现图片淡入淡出效果。
jquery淡入淡出效果_www.
.box{ margin:auto 0; width:302px; height:auto; background:#ccc; text-align:left;}
.box_son{ float:left;width:100px; height:100px; background:#999; margin-top:1px; text-align:center; line-height:100px; overflow:visible;_overflow:hidden; }
.box_son_son{ float:left;width:0; height:100px; background:#567fd0; position:relative; left:101px; top:-100px;filter:alpha(opacity=36); opacity:0.36; text-align:center; line-height:100px; text-align:center;display:none;}
.test{ width:100px; height:100px; }
.ml{ margin-left:1px;}
span{float:left;width:100px; height:100px; cursor: pointer;}
{padding:1px;padding:10px;}
$(document).ready(function(){
$(".box_son span").hover(function(){
$(this).next(".box_son_son:not(:animated)").animate({opacity: "show", width: "+=201px"}, "slow",function(){
$(".box_son_son").css({ opacity: 0.36 });
});
});
$(".box_son span").mouseout(function(){
$(this).next(".box_son_son").animate({opacity: "hide", width: "0"}, "500");
});
});
- jquery图片淡入淡出与图片切换效果的例子
- jquery实现添加图片淡入淡出效果的代码
- jQuery实现首页图片淡入淡出效果
- jquery图片淡入淡出效果的例子
- jquery怎么实现图片淡入淡出?示例
- jquery图片淡入淡出效果的简单示例
- javascript 图片淡入淡出效果实例代码