Share some commonly used jQuery animation events and animation functions_jquery

Some commonly used jQuery animation functions have been sorted out and are quite useful when making interactive pages

.css('a','12px');
.css({
 a:'12px',
 b:'#fff'
});
.show();
.hide();
.toggle();
.fadeIn();
.fadeOut();
.fadeToggle();
.slideDown();
.slideUp();
.slideToggle();
.text('string');
.animate({
 a:'40px',
 b:'ccc'
},200)
.fadeTo(600,0.4);

Then I sorted out some CSS properties that the animate function can operate, which were actually found from other places on the Internet (http://www.jb51.net/article/75510.htm):

backgroundPosition
 borderWidth
 borderBottomWidth
 borderLeftWidth
 borderRightWidth
 borderTopWidth
 borderSpacing
 margin
 marginBottom
 marginLeft
 marginRight
 marginTop
 outlineWidth
 padding
 paddingBottom
 paddingLeft
 paddingRight
 paddingTop
 height
 width
 maxHeight
 maxWidth
 minHeight
 maxWidth
 font

fontSize (specified in the css parameter of the animate function and is different from the standard css property, for example, this css standard is: font-size. In the same way
This is also the case with many faces)

 bottom
 left
 right
 top
 letterSpacing
 wordSpacing
 lineHeight
 textIndent
 opacity

jQuery animation function

jQuery animation functions are divided into three categories:

1. Basic animation function: both transparent gradient and sliding effect, commonly used animation effects.
2. Sliding animation function: only use sliding effect.
3. Fade animation function: only use the fade effect.

1. Basic animation function:

1. show()

Show hidden matching elements. This is the non-animated version of 'show(speed, [callback])'. If the selected element is visible, this method will not change anything. This method will work regardless of whether the element is hidden via the hide() method or display:none; is set in CSS.
For example: display all paragraphs, $("p").show()

2. show(speed,[callback])

Display matching elements with elegant animation, and optionally return a callback function after the display is completed. Each matched element's height, width, and opacity can be dynamically changed based on a specified speed.
For example: use slow animation to display hidden paragraphs, lasting 600 milliseconds, $("p").show(600)

3. hide()

Hide display elements. This is the non-animated version of 'hide( speed, [callback] )'. If the selected element is hidden, this method will not change anything.
For example: hide all paragraphs, $("p").hide()

4. hide(speed,[callback])

Hide all matching elements with elegant animation and optionally trigger a callback function after display is completed. You can dynamically change the height, width, and opacity of each matched element based on a specified speed. In jQuery1.3, padding and margin will also be animated, and the effect will be smoother.
For example: Use 600ms to slowly hide the paragraph, $("p").hide("slow");

5. toggle

Toggle the visible state of an element. If the element is visible, switch it to hidden; if the element is hidden, switch it to visible.
For example: toggle the visible state of all paragraphs, $("p").toggle()

6. toggle(switch)

The visible state of the cut flower element is based on the switch parameter (true is visible, false is hidden). If switch is set to true, the show() method is called to display the matching element. If switch is set to false, hide() is called to hide the element.
For example: switch the visible state of all paragraphs, varflip=0;$("button").click(function(){$("p").toggle(flip %2==0);});

7. toggle(speed,[callback])

Toggle all matching elements with elegant animation and optionally trigger a callback function after display is completed. Dynamically changes the height, width, and opacity of each matching element according to a specified speed. jquery1.3, padding and margin will also have animations, and the effect will be smoother.

For example: Use 200ms to quickly switch the display state of the paragraph, and then pop up a dialog box, $("p").toggle("fast",function(){alert("hello!");});

2. Sliding animation function sliding

1. slideDown(speed,[callback])

Dynamically display all matching elements through height changes (increase downward), and send a callback function at an optional location after the display is completed. This animation effect only adjusts the height of the element, and can cause the matching elements to be displayed in a "sliding" manner. In jQuery 1.3, the upper and lower padding and margin will also be animated, and the effect will be smoother.
For example: Use 600ms to slowly slide the paragraph down, $("p").slideDown("slow");

2. slideUp(speed,[callback])

Dynamicly hide all matching elements by changing the height (decreasing upward), and optionally triggering a callback function after the hiding is completed.
For example: slowly slide the paragraph up in 600ms, $("p").slideUp("slow");

3. slideToggle(speed,[callback])

Toggle the visibility of all matching elements through height changes, and optionally trigger a callback function after the switch is completed.
For example: slowly slide the paragraph up or down in 600ms, $("p").slideToggle("slow");

3. Fading function Fading

1. fadeIn(speed,[callback])

Achieve the fade-in effect of all matching elements through changes in transparency, and optionally call a callback function after the animation is completed. This animation only adjusts the opacity of the element, which means that the height and width of all matching elements will not change.
For example: Use 600ms to slowly fade the paragraph in, $("p").fadeIn("slow");

2. fadeOut(speed,[callback])

Achieve the fade-out effect of all matching elements through changes in opacity, and optionally trigger a callback function after the animation is completed.
For example: Use 600ms to slowly fade out the paragraph, $("p").fadeOut("slow");

3. fadeTo(speed,opacity,[callback])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选的出发一个回调函数。
例如：用600ms缓慢将段落的透明度调整到0.66，大约2/3的可见度，$("p").fadeTo("slow",0.66)

四、自定义动画函数Custom

1、animate(params,[duration],[easing],[callback])用于创建自定义动画的函数。这个函数的关键在于制定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如height、top或opacity)。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。而每个属性的值表示这个样式属性到多少是动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是hide、show、toggle这样的字符串值，则会就该属性调用默认的动画形式。

例如：点击按钮后div元素的几个不同属性一同变化，

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

2、stop([clearQueue],[gotoEnd])

停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行clearQueue(Boolean):如果设置成true，则清空队列。可以立即结束动画。gotoEnd(Boolean):让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

例如：点击Go之后开始动画,点Stop之后会在当前位置停下来:

// 开始动画
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function(){
$(".block").stop();
});
[javascript] view plaincopy
$(document).ready(function(){ 
$(".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; 
}); 
});