jquery Source Analysis---FX analysis

Common methods of 8.1 FX

FX is very exciting compared to the previous analysis of the code. Before the landing of the Javaeye, its landing window fade in the effect is always fantasy. The implementation of the FX is also available in the core package of Jquery.

The essence of FX is the continuous and orderly change of the attributes of DOM elements to achieve visual effects, dynamic change. These properties are mainly height, width, transparency and color (background color and foreground color), and so on. Continuous order is related to time, that is, at a certain point in time to change the CSS style properties, the next point of time to change the style properties, to achieve the effect of the process of the gradient.

jquery provides us with several commonly used FX functions.

Slide is a slide out of the action, for Slide,jquery provides Slidedown, Slideup, Slidetoggle three ways. Slidedown is the element that slides out of the bottom and is finally visible. Slideup is the element to the above gradually into, and finally disappeared. Slidetoggle is the transition between the two.

Fade is a light change of action. The Fadein, fadeout two methods are provided for Fade,jquery. Fadein is a gradual display of the entire element from scratch. Fadeout instead, it disappears gradually from there to the element, fade also provides a fadeto to change the transparency gradient to a specified value rather than disappearing.

jquery also provides a more powerful set of methods. Show, hide, and toggle display elements in a more graceful way. Show is the width of the elements gradually become, while the height is gradually becoming larger, while the transparency is gradually from no to opaque. The effect is that the elements grow larger from one point to the other and are eventually fully displayed. Hide is just the opposite, it is gradually transparent at the same time the width and height gradually become smaller, finally disappeared. Toggle is the conversion between the two.

jQuery.each({
　　slideDown: { height:"show" },
　　slideUp: { height: "hide" },
　　slideToggle: { height: "toggle" },
　　fadeIn: { opacity: "show" },
　　fadeOut: { opacity: "hide" }
}, function( name, props ){
　　 jQuery.fn[ name ] = function( speed, callback ){
　　　 return this.animate( props, speed, callback );
　　};
});
　　 // 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，
//并 在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度。
　　fadeTo: function(speed,to,callback){
　　　 return this.animate({opacity: to}, speed, callback);
},

Slide and fade are accomplished by changing the height or opacity respectively. Its completed tasks are on this.animate (props, speed, callback).

Show

For show and hide, they work better and their code is a bit more complex.

Show (Speed,[callback])
Hides all matching elements with graceful animations and optionally triggers a callback function after the display is complete.
The height, width, and opacity of each matching element can be dynamically changed according to the specified speed.
Show hidden Matching element shows ()
Show:function (Speed,callback) {
Return speed?
This.animate ({height: show), Width: "Show", Opacity: "Show"
}, speed, callback)
: This.filter (": Hidden"). each (function () {
This.style.display = This.oldblock | | "";
if (Jquery.css (this, "display") = = "None") {
var elem = jQuery ("<" + This.tagname + "/>"). Appendto ("body");
This.style.display = Elem.css ("display");//default displayed display
if (This.style.display = = "None")//explicitly set the tag does not show This.style.display = "Block";
Elem.remove ()//Is it necessary to deal with the above?
}
}). end ();//Go back to the previous jquery object
},
Hide:function (Speed,callback) {
Return speed?
This.animate ({height: "Hide", Width: "Hide", opacity: "Hide"
}, speed, callback)
: This.filter (": Visible"). each (function () {
This.oldblock = This.oldblock | | Jquery.css (This, "display");
This.style.display = "None";
}). end ();
},
Toggle:function (FN, fn2) {
Return Jquery.isfunction (FN) && jquery.isfunction (fn2)?
This._toggle.apply (this, arguments)://Original Toggle
(FN?) This.animate ({height: "toggle", Width: "Toggle",
Opacity: "Toggle"}, FN, fn2)
: This.each (function () {jquery (this) [jquery (This). Is (": hidden")?
"Show": "Hide"] ();}
Call show, or the hide function for each element.
)
);
},

The show and hide functions directly show or hide elements if they do not specify speed parameters. No animation effect. If the parameter of the given speed. It can change the height width transparency according to this speed value dynamically to achieve the animation show or hide effect. Toggle is the transformation of these two.