jquery encapsulates several API s on the $. animate() interface for animation operations of matching elements, as follows:
- $(selector). Show (speed, eating, callback); if the selected elements have been hidden, these elements will be displayed
- $(selector). Hide (speed, eating, callback); hide the selected element if it is already displayed
- $(selector). Toggle (speed, eating, callback); toggles the visible state of elements. If the selected elements are visible, they are hidden. If the selected elements are hidden, they are displayed.
writer by: Desert QQ:22969969
- $(selector). Slidedown (speed, eating, callback);; slide the element down.
- $(selector).slideUp(speed,easing,callback);; slide element up
- $(selector).slideToggle(speed,easing,callback);; switch between slideDown() and slideUp() methods.
- $(selector). Fadein (speed, eating, callback);; show hidden elements, and slowly fade them until they disappear.
- $(selector).fadeOut(speed,easing,callback);; hides visible elements and slowly displays them until they are fully visible
- $(selector). Fadetoggle (speed, eating, callback);; switches between fadeIn() and fadeOut() methods. If the element is faded out, fadeToggle() adds a fade in effect to the element. If the element is faded in, fadeToggle() adds a fade out effect to the element.
The parameters are the same:
- speed; the duration of the animation, which is 0 by default and can be set to "slow", "normal", "fast" or milliseconds
- easing; animation function, support the current slow function linear and cosine slow function swing, the default is swing
- callback; the function to be executed after the animation is executed
for instance:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <style> html,body,div,p{margin:0;padding:0;} div{width: 200px;height: 50px;float: left;margin:20px 20px 0 20px;} p{width: 200px;height: 50px;background: #f0c;border-radius: 4px;} select{border-color: #dcdfe6;height: 40px;line-height: 40px;padding:0 15px;font-size: 16px;margin-top: 20px;border-radius: 4px;} option{font-size: 14px;line-height: 34px;padding:0 20px;color: #606266;height: 34px;display: } </style> </head> <body> <div><p></p></div><select></select> <script> //to select New drop-down options ['show','hide','toggle','slideDown','slideUp','slideToggle','fadeIn','fadeOut','fadeToggle'].forEach(function(val){ $('select').append(`<option value="${val}">${val}</option>`) }) //Monitor select Selection events for,implement p Animation event corresponding to element $('select').change(function(){ $('p')[$(this).val()](1000,'swing'); }) </script> </body> </html>
The effect is as follows:
Because there is no need to load plug-ins, only a jQuery can implement these animations, so it is very convenient to use.
The internal implementation is just the encapsulation of $. animate(), as follows:
var fxAttrs = [ // height animations [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ], //Highly animated // width animations [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ], //Width animation // opacity animations [ "opacity" ] //transparency ]; function genFx( type, num ) { //Responsible for generating animation style sets for convenient methods var obj = {}; jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice( 0, num )), function() { obj[ this ] = type; }); return obj; } //such as:getFx('show',1)The resulting animation style collection is:Object { height: "show", marginTop: "show", marginBottom: "show", paddingTop: "show", paddingBottom: "show" } jQuery.each({ slideDown: genFx( "show", 1 ), slideUp: genFx( "hide", 1 ), slideToggle: genFx( "toggle", 1 ), fadeIn: { opacity: "show" }, fadeOut: { opacity: "hide" }, fadeToggle: { opacity: "toggle" } }, function( name, props ) { jQuery.fn[ name ] = function( speed, easing, callback ) { //Newly added slideDown,slideUp,slideToggle,fadeIn,fadeOut,fadeToggle Convenient method return this.animate( props, speed, easing, callback ); }; });