JQuery Visuals-click on the picture, the picture disappears from the left and appears from the right

Transferred from: http://www.cnblogs.com/wenzichiqingwa/archive/2012/09/10/2678325.html

Html:

<div id= "Scroller1" >
            
" /div>

Css:

img{
                border:0;
                /* Image to animate, you must set this CSS property */
                position:relative;
            }
            /* can only accommodate displaying one picture */
            #scroller1 {                  
                margin:auto;
                /*                width:470px;*/
                width:150px;
                height:150px;
                padding:10px;
                border:1px solid deeppink;
                Overflow:hidden;
                /* This CSS property is set to animate the picture based on SCROLL1 */
                position:relative;
            }

Jquery:

$ ('. Oneimage '). Click (function () {
                    //left, move out left border, last distance 160px from left margin.
                    $ (this). Animate ({' Left ': -160}, ' Slow ', function () {
                        //animate) callback function, first moving the picture, distance 150px from the right edge, at this time Move to close to the left edge.
                        $ (this). css ({' Left ': ') ';
                        $ (this). Animate ({' Left ': 0}, ' slow ');});