jquery 视觉特效（鼠标悬停时依次显示图片）-CSDN博客

效果描述：

有几副图片，让他们依次叠加重合。首先显示第一张图片。然后鼠标悬停在上面，边框变化。然后离开，然后第一张淡出，第二张淡入。接着悬停在第二张图片，边框变化，然后离开，第二张淡出，第三张淡入。以此类推。

HTML:

<a href="#" class="image"><img src="pic1.jpg" alt="" width="150" height="150" /></a>
<a href="#" class="image"><img src="pic2.jpg" alt="" width="150" height="150"/></a>
<a href="#" class="image"><img src="pic3.jpg" alt="" width="150" height="150" /></a>
<a href="#" class="image"><img src="pic4.jpg" alt="" width="150" height="150" /></a>
<a href="#" class="image"><img src="pic5.jpg" alt="" width="150" height="150"/></a>
<a href="#" class="image"><img src="pic6.jpg" alt="" width="150" height="150" /></a>

CSS:

.image{
                /*设置定位属性是决定定位，这样才能重合。并任意定义位置，此处我定义TOP:300,LEFT:300*/
                position: absolute;
                top: 300px;
                left: 300px; 

}

jquery:

//              首先隐藏全部图片
                $('.image').hide();
//                然后显示第一张图片，因为默认的情况是显示最后一张图片的。
                $('.image:first').fadeIn('slow');
                $('.image').hover(function(){
//                    边框颜色
                    $(this).css('border','1px solid lightskyblue');
                }, function(){
//                    获取下一个图片对象,如果显示了最后一张图片,此时其next的length为0,如果让它从新显示第一张图片
                    var next = ($(this).next().length)?$(this).next():$('.image:first');
                    $(this).css('border','');
//                 当前图片对象淡出,此处添加stop方法,为了防止快速在图片上悬浮出入的时候,造成动画反复运动.stop:停止当前动画
                    $(this).stop().fadeOut('slow');
//                  下一张图片对象淡入
                    next.fadeIn('slow');
                });