Sample Code of jquery animate image mode sliding

Each attribute in this object represents a changeable style attribute (such as "height", "top", or "opacity "). Note: All specified attributes must be in the form of camels. For example, marginLeft must be used to replace margin-left. The value of each attribute indicates how many style attributes are ended when the animation ends. If it is a value, the style property will gradually change from the current value to the specified value. If a string value such as "hide", "show", or "toggle" is used, the default animation format is called for this attribute.

The function declaration is as follows:Copy codeThe Code is as follows: animate (params [, duration [, easing [, callback])

In jQuery, you can use em and % units. In addition, you can specify "+ =" or "-=" before the attribute value to make the element do relative motion.

The following shows an example of Sliding between the image list and the left and right sides. The main code is as follows:Copy codeThe Code is as follows: <script type = "text/javascript">
$ (Function (){
$ Li1 = $ (". apply_nav. apply_array ");
$ Window1 = $ (". apply. apply_w ");
$ Left1 = $ (". apply. img_l ");
$ Right1 = $ (". apply. img_r ");

$Window1.css ("width", $ li1.length * 166 );

Var lc1 = 0;
Var rc1 = $ li1.length-5;
$ Left1.click (function (){
If (lc1 <1 ){
Alert ("already the first image ");
Return;
}
Lc1 --;
Rc1 ++;
$ Window1.animate ({left: '+ = 166px'}, 1000 );
});

$ Right1.click (function (){
If (rc1 <1 ){
Alert ("the last image ");
Return;
}
Lc1 ++;
Rc1 --;
$ Window1.animate ({left: '-= 166px'}, 1000 );
});
})
</Script>

Running result:

Online Demo: http://demo.jb51.net/js/2011/jqueryanimate/index.html
Download source code: Click to download