jquery小案例-王者荣耀风琴
//鼠标经过小li,当前小li变为224px,同时里面的小图片淡出,大图片淡入
其余兄弟小li宽度编程69px,小图片淡入,大图片淡出
<style>
.small{
position:absolute;
top:
left:
width:
}
.big{
width:224px;
display:none;
}
.king li .current .big{
display:block;
}
.king li .current .small{
display:none;
}
</style>
<div class ="king">
<ul>
<li class = "current">
<a href="#">
<img src ="" class= "small">
<img src ="" class= "big">
</a>
</li>
<li>
<a href="#">
<img src ="" class= "small">
<img src ="" class= "big">
</a>
</li>
<li>
<a href="#">
<img src ="" class= "small">
<img src ="" class= "big">
</a>
</li>
</ul>
</div>
$(function(){
//鼠标经过某个小li
$(.king li).mouseenter(function(){
//1.当前小li宽度变成224px 同时小图片淡出,大图片淡入
$(this).stop().animate({width:224px}).find(".small").stop().fadeOut().siblings(".big").fadeIn();
//2.其余兄弟小li宽度69px,小图片淡入,大图片淡出
$(this).stop().sinlings("li").animate({width:69}).find(".small").stop().fadeIn().siblings(".big").fadeOut("");
})
})