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

 

效果：

初始：

點擊圖片后：

最終：