Self packaged showhide.js

Including no animation, css3 animation, js animation

Including: fade (fade in and fade out) slideUpDown (slide up and down), slideLeftRight (slide left and right), fadeSlideUpDown (fade in and fade out + slide up and down), fadesleleftright (fade in and fade out + slide left and right)

(function($){
    var transition=window.mt.transition;//Supportive transition Writing method
    var isSupport=window.mt.isSupport;//Whether to support transition

    // public init
    function init($elem,hiddenCall){
        if($elem.is(":hidden")){
            $elem.data("status","hidden");
            if(typeof hiddenCall==="function") hiddenCall();
        }else{
            $elem.data("status","shown");
        }    
    }
    //public show
    function show($elem,callback){
        if($elem.data("status")==="show") return;
        if($elem.data("status")==="shown") return;

        $elem.data("status","show").trigger("show");
        callback();
    }
    // public hide
    function hide($elem,callback){
        if($elem.data("status")==="hide") return;
        if($elem.data("status")==="hidden") return;

        $elem.data("status","hide").trigger("hide");
        callback();
    }
    // No animation mode
    var silent={
        init:init,
        show:function($elem){
            show($elem,function(){
                $elem.show();
                $elem.data("status","shown").trigger("shown");
            });
        },
        hide:function($elem){
            hide($elem,function(){
                $elem.hide();
                $elem.data("status","hidden").trigger("hidden");
            });
        }
    }
    // css3 Animation mode
    var css3={
        _init:function($elem,className){
            $elem.addClass("transition");
            init($elem,function(){
                $elem.addClass(className);
            });        
        },
        _show:function($elem,className){
            $elem.off(transition).one(transition,function(){//Execute after animation execution shown
                $elem.data("status","shown").trigger("shown");
            })
            $elem.show();
            setTimeout(function(){
                $elem.removeClass(className);
            },20);            
        },
        _hide:function($elem,className){
            $elem.off(transition).one(transition,function(){
                $elem.hide();
                $elem.data("status","hidden").trigger("hidden");
            })
            $elem.addClass(className);
        },
        //Fade in and fade out
        fade:{
            init:function($elem){
                css3._init($elem,"fadeOut");
            },
            show:function($elem){
                show($elem,function(){
                    css3._show($elem,"fadeOut");    
                });
            },
            hide:function($elem){
                hide($elem,function(){
                    css3._hide($elem,"fadeOut");
                });
            }
        },
        //Sliding up and down
        slideUpDown:{
            init:function($elem){        
                //$elem.height($elem.height());//Get the height of the element being opened by the content, and set the height dynamically
                css3._init($elem,"slideUpDownCollapse");
            },
            show:function($elem){
                show($elem,function(){
                    css3._show($elem,"slideUpDownCollapse");        
                });
            },
            hide:function($elem){
                hide($elem,function(){
                    css3._hide($elem,"slideUpDownCollapse");
                });
            }
        },
        //Sliding left and right
        slideLeftRight:{
            init:function($elem){        
                $elem.width($elem.width());//Get the height of the element being opened by the content, and set the height dynamically
                css3._init($elem,"slideLeftRightCollapse");
            },
            show:function($elem){
                show($elem,function(){
                    css3._show($elem,"slideLeftRightCollapse");        
                });
            },
            hide:function($elem){
                hide($elem,function(){
                    css3._hide($elem,"slideLeftRightCollapse");
                });
            }
        },
        //Fade in fade out slide up and down
        fadeSlideUpDown:{
            init:function($elem){        
                $elem.height($elem.height());//Get the height of the element being opened by the content, and set the height dynamically
                css3._init($elem,"fadeOut slideUpDownCollapse");
            },
            show:function($elem){
                show($elem,function(){
                    css3._show($elem,"fadeOut slideUpDownCollapse");        
                });
            },
            hide:function($elem){
                hide($elem,function(){
                    css3._hide($elem,"fadeOut slideUpDownCollapse");
                });
            }
        },
        //Fade in and fade out slide left and right
        fadeSlideLeftRight:{
            init:function($elem){        
                $elem.width($elem.width());//Get the height of the element being opened by the content, and set the height dynamically
                css3._init($elem,"fadeOut slideLeftRightCollapse");
            },
            show:function($elem){
                show($elem,function(){
                    css3._show($elem,"fadeOut slideLeftRightCollapse");        
                });
            },
            hide:function($elem){
                hide($elem,function(){
                    css3._hide($elem,"fadeOut slideLeftRightCollapse");
                });
            }
        }
    }
    // js Animation mode
    var js={
        _init:function($elem,callback){
            $elem.removeClass("transition");
            init($elem,callback);        
        },
        _show:function($elem,mode){
            show($elem,function(){
                $elem.stop()[mode](function(){
                    $elem.data("status","shown").trigger("shown");
                });            
            });        
        },
        _hide:function($elem,mode){
            hide($elem,function(){
                $elem.stop()[mode](function(){
                    $elem.data("status","hidden").trigger("hidden");
                });            
            });        
        },
        //Custom initialization common part
        _customInit:function($elem,options){//options Is an object that contains all the attributes to be changed        
            var styles={};
            for(var o in options){
                styles[o]=$elem.css(o);
            }

            $elem.data("styles",styles);//If not saved, then styles Local, cannot be used in other functions

            js._init($elem,function(){
                $elem.css(options);
            });
        },
        _customShow:function($elem){
            show($elem,function(){
                var styles=$elem.data("styles");

                $elem.show();
                //Use animate Animate            
                $elem.stop().animate(styles,function(){//Callback after animation
                    $elem.data("status","shown").trigger("shown");
                });
            });        
        },
        _customHide:function($elem,options){
            hide($elem,function(){        
                $elem.stop().animate(options,function(){//Callback after animation
                    $elem.hide();
                    $elem.data("status","hidden").trigger("hidden");
                });
            });
        },
        fade:{
            init:function($elem){
                js._init($elem);
            },
            show:function($elem){
                js._show($elem,"fadeIn");
            },
            hide:function($elem){
                js._hide($elem,"fadeOut");
            }        
        },
        slideUpDown:{
            init:function($elem){
                js._init($elem);
            },
            show:function($elem){
                js._show($elem,"slideDown");
            },
            hide:function($elem){
                js._hide($elem,"slideUp");
            }    
        },
        slideLeftRight:{
            init:function($elem){
                js._customInit($elem,{
                    "width":0,
                    "padding-left":0,
                    "padding-right":0
                });
            },
            show:function($elem){
                js._customShow($elem);
            },
            hide:function($elem){
                js._customHide($elem,{
                    "width":0,
                    "padding-left":0,
                    "padding-right":0
                });
            }            
        },
        fadeSlideUpDown:{
            init:function($elem){
                js._customInit($elem,{
                    "opacity":0,
                    "height":0,
                    "padding-top":0,
                    "padding-bottom":0
                });
            },
            show:function($elem){
                js._customShow($elem);
            },
            hide:function($elem){
                js._customHide($elem,{
                    "opacity":0,
                    "height":0,
                    "padding-top":0,
                    "padding-bottom":0
                });
            }    
        },
        fadeSlideLeftRight:{
            init:function($elem){
                js._customInit($elem,{
                    "opacity":0,
                    "width":0,
                    "padding-left":0,
                    "padding-right":0
                });
            },
            show:function($elem){
                js._customShow($elem);
            },
            hide:function($elem){
                js._customHide($elem,{
                    "opacity":0,
                    "width":0,
                    "padding-left":0,
                    "padding-right":0
                });
            }    
        }
    }

    //Set default parameters
    var defaults={
        css3:false,
        js:false,
        animation:"fade"
    };

    //Encapsulate a function
    function showHide($elem,options){
        var mode=null;

        if(options.css3 && isSupport){//css3 animation
            mode=css3[options.animation] || css3[defaults.animation];//fault-tolerant
        }else if(options.js){//js animation
            mode=js[options.animation] || js[defaults.animation];
        }else{//No animation
            mode=silent;
        }

        mode.init($elem);

        return {
            show:$.proxy(mode.show,this,$elem),
            hide:$.proxy(mode.hide,this,$elem)            
        };    
    }

    // Change to jquery Plug-in mode        
    $.fn.extend({
        showHide:function(opt){
            //this Point to the element calling the plug-in, here is box
            //It can be one or more elements, so use each ergodic
            return this.each(function(){
                var ui=$(this);
                // If options Parameter object is passed, then options Attribute and defaults Property is merged and stored in the empty object and assigned to options
                // If options If the object is not passed; otherwise false，Attribute is defaults Default property and assign to options
                // $.extend(target, obj1, objn) Object merging
                var options=$.extend({},defaults,typeof opt==="object" && opt);
                    
                /*
                    opt When it is a parameter object, such as:
                    box.showHide({
                        css3:true,
                        animation:"slideLeftRight"            
                    });
                */        
                var mode=ui.data("showHide");    
                //mode Object instances only need to be generated once                    
                if(!mode){
                    mode=showHide(ui,options);//mode Return contains show and hide Method
                    ui.data("showHide",mode);
                }
                
                /*
                    opt When it is a show or hide string, for example:
                    box.showHide("show");
                */
                //If options yes show perhaps hide String, execute method
                if(typeof mode[opt]==="function"){
                    mode[opt]();
                }
            })
            
        }
    });

})(jQuery);

Page usage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>showhide</title>
    <link rel="stylesheet" href="../css/base.css">
    <style>
        body{
            width:400px;
            margin:0 auto;
        }
        button{
            width:50%;
            height:30px;
            background: #abcdef;
        }
        .box{
            width:400px;
            /*height:300px;*//*height Distraction*/    
            /*padding:150px 0;*//*padding Distraction*/        
            background-color:pink;
            overflow:hidden;/*The height of being opened by content needs to be set to hide overflow*/
        }
        .transition{
            -webkit-transition:all .5s;
            -moz-transition:all .5s;
            -ms-transition:all .5s;
            -o-transition:all .5s;
            transition:all .5s;
        }
        .fadeOut{
            opacity: 0;
            visibility: hidden;
        }
        /*Contraction style*/
        .slideUpDownCollapse{
            height:0 !important;/*Avoid failure to take effect due to insufficient priority*/
            padding-top:0 !important;
            padding-bottom:0 !important;
        }
        .slideLeftRightCollapse{
            width:0 !important;/*Avoid failure to take effect due to insufficient priority*/
            padding-left:0 !important;
            padding-right:0 !important;
        }
    </style>
</head>
<body>
    <button id="btn-show" class="btn">display</button><button id="btn-hide" class="btn">hide</button>
    <div class="box">
        //content<br>
        //Distraction<br>
        //height<br>
    </div>
    <button class="btn">Test occupancy issues</button>

    <script src="../js/jquery.js"></script>
    <script src="../js/transition.js"></script>
    <script src="../js/showhide.js"></script>
    <script>

        var box=$(".box");

        //jquery Plug in mode parameters
        box.showHide({
            css3:true,
            animation:"slideLeftRight"            
        });//Return a containing show and hide Object of method mode

        $("#btn-show").on("click",function(){
            //jquery Plug in mode call
            box.showHide("show");
        });
        $("#btn-hide").on("click",function(e){
            //jquery Plug in mode call
            box.showHide("hide");
        });

        box.on("show shown hide hidden",function(e){
            if(e.type==="show"){
                console.log("show");
            }
            if(e.type==="shown"){
                console.log("shown");        
            }
            if(e.type==="hide"){
                console.log("hide");                        
            }
            if(e.type==="hidden"){
                console.log("hidden");                    
            }
        });

    </script>
</body>
</html>

Note: the introduced transition.js has been pasted in the previous article: https://www.cnblogs.com/chenyingying0/p/12363649.html

base.css: https://www.cnblogs.com/chenyingying0/p/12363689.html

A simple explanation:

This is the slideLeftRight effect of setting and selecting css3 animation

Of course, there are default options set in showhide.js

Here, elem.show hide ("show") elem.showHide("hide") represents the display and hide operations, respectively

This is the operation to be performed when the display of elements is started and the display is completed and the hiding is started and the hiding is completed

You can define it yourself