jQuery source code analysis animation module convenient animation details

Posted by esthera on Sun, 23 Feb 2020 03:54:29 +0100

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">
    <meta charset="UTF-8">
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
        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: }
        //to select New drop-down options
            $('select').append(`<option value="${val}">${val}</option>`)
        //Monitor select Selection events for,implement p Animation event corresponding to element

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" }

    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 );

Topics: Javascript JQuery