jquery animate picture die sliding Sample code _jquery

Each property in this object represents a style attribute that can be changed (such as "height", "top", or "opacity"). Note: All specified attributes must be in camel form, such as marginleft instead of Margin-left. The animation ends when the value of each property indicates how much of the style property is. If it is a numeric value, the Style property is graduated from the current value to the specified value. If you are using a string value such as hide, show, or toggle, the default animation form is invoked for the property.

The function declaration is as follows:

Copy Code code as follows:

Animate (params[, duration[, easing[, callback]])

In JQuery, you can use EM and% units. Alternatively, you can make the element relative motion by specifying "= =" or "=" in front of the attribute value.

The following shows an example of a picture list sliding around, with the main code as follows:

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$li 1 = $ (". Apply_nav. Apply_array");
$window 1 = $ (". Apply. Apply_w");
$left 1 = $ (". Apply. img_l");
$right 1 = $ (". Apply. Img_r");

$window 1.css ("width", $li 1.length*166);

var Lc1 = 0;
var RC1 = $li 1.length-5;
$left 1.click (function () {
if (Lc1 < 1) {
Alert ("Already the first picture");
Return
}
lc1--;
rc1++;
$window 1.animate ({left: ' +=166px '}, 1000);
});

$right 1.click (function () {
if (RC1 < 1) {
Alert ("Already the Last Picture");
Return
}
lc1++;
rc1--;
$window 1.animate ({left: '-=166px '}, 1000);
});
})
</script>

The results of the run are as shown in the figure:

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