Introduction to the use of jquery animated animate methods

The function used to create the custom animation.
return value: JQuery animate (params, [duration], [easing], [callback])

If you are using a string value such as "Hide," "Show," or "toggle," the default animated form is called for the property. Paramsoptions a group of packages

Contains a collection of style attributes and their values as animated and final values

Params object {}, note: All specified properties must be in camel form, for example with MarginLeft instead of margin-left, if you are using "hide",

A string value such as "show" or "toggle", the default animated form is called for the property.

Duration (optional) A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example: 1000)

Easing (optional) the name of the erase effect to use for string (requires plug-in support). Default jquery provides "linear" and "swing"

Callback (optional) function to execute when the animation is complete

0. Stop the animation

?

123	if($(‘.swaplist,.mainlist‘).is(‘:animated‘)){    $(‘.swaplist,.mainlist‘).stop(true,true);}

Animate instances:
1. Several different attributes of the DIV element change after clicking the button

?

12345678

$("#go").click(function () {    $("#block").animate({        width: "90%",        height: "100%",        fontSize: "10em",        borderWidth: 10    }, 1000);});

2. Let the specified element move around

?

123456

$("#right").click(function () {    $(".block").animate({ left: ‘+50px‘ }, "slow");});$("#left").click(function () {    $(".block").animate({ left: ‘-50px‘ }, "slow");});

3. Toggle the height and transparency of paragraphs within 600 milliseconds

?

123	$("p").animate({    height: ‘toggle‘, opacity: ‘toggle‘}, "slow");

4. Use 500 milliseconds to move the paragraph to the left 50 and show it clearly (transparency is 1)

?

123	$("p").animate({    left: 50, opacity: ‘show‘}, 500);

5. Toggle Show Hidden

?

1234567891011

$(".box h3").toggle(function(){     $(this).next(".text").animate({height: ‘toggle‘, opacity: ‘toggle‘}, "slow");         $(this).addClass("arrow");         return false;     },function(){         $(this).next(".text").animate({height: ‘toggle‘, opacity: ‘toggle‘}, "slow");         $(this).removeClass("arrow");         return false;     }); });

?

12345

//滚动焦点$(window).scroll(function() {              //当前窗口的滚动事件var winTop = $(window).scrollTop();     //获取当前窗口的大小varobjTop = $("#obj1").offset().top;   //获取当前对象的x坐标});

Introduction to the use of jquery animated animate methods