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

效果描述：

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

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');});