jQuery 视觉效果-点击图片，图片从左边消失，并从右边出现

转自：http://www.cnblogs.com/wenzichiqingwa/archive/2012/09/10/2678325.html

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