jquery 视觉特效（点击图片，向左滚动消失，并从右侧出现）

 

HTML ：

 

<div id="scroller1">
            <img src="pic1.jpg" alt="" width="150" height="150" class="oneImage"/>
</div>

 

 

CSS：

 

          img{
                border: 0;
                /*图片要实现动画效果，必须要设置此CSS属性*/
                position: relative;
            }
            /*只能容纳显示一张图片*/
            #scroller1{                  
                margin: auto;
                /*                width: 470px;*/
                width: 150px;
                height: 150px;
                padding: 10px;
                border: 1px solid deeppink;
                overflow: hidden;
                /*设置此css属性，是为了让图片基于scroll1产生进行动画效果*/
                position: relative;
            }

 

Jquery：

$('.oneImage').click(function(){
                    //向左移动，移出左边界，最后距离左边距160px.
                    $(this).animate({'left':-160},'slow',function(){
                        //animate回调函数，首先距离移动图片，距离左边界150px，此时在右边界处了。在移动至贴近左边界。
                        $(this).css({'left':150});
                        $(this).animate({'left':0}, 'slow');
                    });
            
});

 

效果：

初始：

点击图片后：

最终：