toggle和layer的显示和隐藏的动画不同步

dropdown-toggle和dropdown-layer的显示和隐藏的动画不同步什么原因？toggle比layer消失的慢

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/common.css">
    <link rel="stylesheet" href="./CSS/index.css">
</head>
<body>
    <div class="nav-site">
        <div class="wrap">
            <ul class="fl">
                <li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li>
                <li class="fl"><a href="javascript:;" class="nav-site-signup link">免费注册</a></li>
                <li class="fl"><a href="javascript:;" class="nav-site-mobile link">手机逛慕淘</a></li>
            </ul>
            <ul class="fr">
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">我的慕淘<i class="dropdown-arrow transition icon">&#xe638;</i></a>
                    <ul class="dropdown-layer dropdown-left transition">
                        <li ><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
                        <li ><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
                    </ul>
                </li>
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow transition icon">&#xe638;</i></a>
                    <ul class="dropdown-layer dropdown-left">
                        <li ><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
                    </ul>
                </li>
                <li class="fl">
                    <a href="###" target="_blank" class="nav-site-category link">商品分类<i class="dropdown-arrow transition"></a>
                </li>
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow transition icon">&#xe638;</i></a>
                    <ul class="dropdown-layer dropdown-left">
                        <li><a href="###" target="_blank" class="menu-item">免费开店</a></li>
                        <li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家培训中心</a></li>
                        <li><a href="###" target="_blank" class="menu-item">体验中心</a></li>
                    </ul>
                </li>
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow transition icon">&#xe638;</i></a>
                    <ul class="dropdown-layer dropdown-right">
                        <li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
                    </ul>
                </li>
                
            </ul>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        window.jQuery||document.write('<script src="./JS/jquery.js"><\/script>');
    </script>


    <script src="./JS/transition.js"></script>
    <script src="./JS/showHide.js"></script>
    <script src="./JS/dorpdown.js"></script>
    <script src="./JS/index.js"></script>
    
</body>
</html>

commom.css

.wrap{
    margin: 0 auto;
    width: 1200px;
}

a.link{
    color: #4d555d;
}

a.link:hover{
    /* 链接经过的颜色 */
    color: #f01414;
}

.menu .dropdown-toggle{
    display: block;
    height: 100%;
    padding: 0 13px 0 12px;
    border-left: 1px solid #f3f5f7;
    border-right: 1px solid #f3f5f7;
}

.menu-item:hover {
    background-color: #f3f5f7;
}

.menu-active .dropdown-toggle {
    background-color: #fff;
    border-color: #cdd0d4;
}

[class*="active"] .dropdown-arrow{
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform:  rotate(180deg);
    transform:  rotate(180deg);
}

.transition {
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}


@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot') format('embedded-opentype'),
        url('../font/iconfont.woff') format('woff'),
        
        url('../font/iconfont.ttf') format('truetype'),
        url('../font/iconfont.svg') format('svg');
  }

.icon {
    font-family: "iconfont" !important;
    font-size: 14px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }

  .menu-active .dropdown-layer {
    display: block;
}

.fadeOut{
    visibility: hidden !important;
    opacity: 0 !important;
}

.slideUpDownCollapse{
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.slideLeftRightCollapse{
    width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


.menu-active .dropdown-toggle {
    background-color: #fff;
    border-color: #cdd0d4;
}

index.css

/* nav-site */

.nav-site{
    width:100%;
    background-color: #f3f5f7;
    height: 45px;
}

.nav-site .wrap{
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #cdd0d4;
}

.nav-site-login{
    color: #f01414;
    margin-left:15px;
}

.nav-site-signup,.nav-site-mobile{
    margin-left: 10px;
}

.nav-site-category{
    margin:0 10px;
}

/* dropdown */
.dropdown{
    position: relative;
}

.dropdown-arrow{
    margin-left: 5px;
    display: inline-block;
}

.dropdown-toggle{
    display: block;
    position: relative;
    padding: 0 13px 0 12px;
    border-left: 1px solid #f3f5f7;
    border-right: 1px solid #f3f5f7;
    border-color: #cdd0d4;
    height: 100%;
}


.dropdown-layer{
    position: absolute;
    /* height: 100%; */
    background-color: #fff;
    border: 1px solid #cdd0d4;
    /* border: 1px solid #828385; */
    display:none;
    overflow: hidden;
}

.menu-item{
    display: block;
    color: #4d555d;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    white-space: nowrap;
    /* border: 1px solid #cdd0d4; */
    /* border-bottom: 1px solid #cdd0d4; */
}


.fr{
    margin-right: 15px;
    height: 44px;
}

.dropdown-left{
    left:0;
}

.dropdown-right{
    right:0;
}

transition.js

(function () {
    var transitionEndEventName={
        transition:'transitionend',
        MozTransition:'transitiond',
        WebkitTransition:'WebkitTransitionEnd',
        OTransition:'oTransitionEnd oTransitionend'
    }

    var transitionEnd=""
        isSupport=false;
    
    for(var name in transitionEndEventName){
        if(document.body.style[name]!==undefined){
            transitionEnd=transitionEnd[name];
            isSupport=true;
            break
        }
    }

    window.mt=window.mt || {};
    window.mt.transition = {
        end:transitionEnd,
        isSupport:isSupport
    }
})()

index.js

(function($) {
    $(".dropdown").dropdown({
        css:true,
        js:true,
        
    });

})(jQuery);

dropdown.js

(function($) {
    'use strict'

    function Dropdown($elem,options){
        this.$elem=$elem;
        this.options=options;
        this.$layer=this.$elem.find('.dropdown-layer')
        this.activeClass=options.active+'-active'
        this._init();
    }

    Dropdown.prototype._init=function () {
        var self = this;
        this.$layer.showHide(this.options);
        this.$layer.on('show shown hide hidden',function(e){
        self.$elem.trigger('dropdonw'+e.type);
        });

        if(this.options.event==='click'){
            this.$elem.on('click',function (e) {
                self.show();
                e.stopPropagation();
            });
            $(document).on('click',this.hide,this);
        }else{
            this.$elem.hover($.proxy(this.show,this),$.proxy(this.hide,this));
        }
    }


    Dropdown.prototype.show=function () {
        var self = this;
        if(this.options.delay){
            this.timer=setTimeout( function() {
                _show();
            }, this.options.delay);
        }else{
            _show();
        }

        function _show(){
            self.$elem.addClass(self.activeClass);
            self.$layer.showHide('show');
            
        }
    }

    Dropdown.prototype.hide=function () {
        if(this.options.delay){
            clearTimeout(this.timer);
        }

        this.$elem.removeClass(this.activeClass);
        this.$layer.showHide('hide');
    }

    Dropdown.DEFAULTS={
        event:"hover",
        css3:'true',
        js:'true',
        animation:'fade',
        delay:'0',
        active:'dropdown'
    };


    
    $.fn.extend({
        dropdown:function(option){
            return this.each(function(){
                
                var $this=$(this),
                dropdown=$this.data('dropdown'),
                options = $.extend({},Dropdown.DEFAULTS,$(this).data(),typeof option==='object'&&option);

                if(!dropdown){
                $this.data('dropdown',dropdown=new Dropdown($this,options));
                }

                if(typeof dropdown[option]==='function'){
                    dropdown[option]();
                }

            });
        }
    });
})(jQuery);

showHide.js

陈立天 2020-05-05

源自：实战：下拉菜单组件化 3-6 改写站点导航中的下拉菜单

收起

4回答

好帮手慕慕子 2020-05-06 20:42:12

同学你好，看同学最后的提问，问题已经解决了是吗？现在就是存在谷歌浏览器本地访问与其他浏览器访问效果不同的问题是吗？如果是这样的话，那么同学就不用纠结了，代码是正确的，出现这种差异是浏览器自身的问题了，推荐同学在chrome浏览器测试时，通过phpstudy打开网页测试。

如果不是的话，可以详细描述下问题，老师会再次帮助您解答的，祝学习愉快~

收起回答

提问者陈立天 2020-05-06 18:55:46

这边的代码没有添加定时器。我用phpstudy 打开网页，鼠标滑动 layer 和toggle就可以实现消失和显示同步，但是在本地访问就不同步为什么会这样？（chrome浏览器）。另外在用iE浏览器本地访问也可以同步，唯独chrome本地访问不行。

收起回答

提问者陈立天 2020-05-06 18:44:23

(function($) {
    var transition =window.mt.transition;

    // init公共部分
    function init($elem,hiddenCallback){
        if($elem.is(':hidden')){
            $elem.data('status','hidde');
            if(typeof hideCallback=='function') hiddenCallback();
            
        }else{
            $elem.data('status','shown');
        }
    }

    // show公共部分
    function show($elem,callback){
        if ($elem.data('status')==='show') return;
        if ($elem.data('status')==='shown') return;
        $elem.data('status','show').trigger('show');
        
        callback();
    }

    // hide公共部分
    function hide($elem,callback){
        if ($elem.data('status')==='hide') return;
        if ($elem.data('status')==='hidden') return;
        $elem.data('status','hide').trigger('hide');
        callback();
    }

    // 正常显示和隐藏
    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')
            })
        }

        // silent结束
    }

    

    var css3={
        // 淡入淡出
        fade:{
            init:function($elem){
                css3._init($elem,'fadeOut');
            },
            show:function($elem){
                css3._show($elem,'fadeOut');
            },
            hide:function($elem){
                css3._hide($elem,'fadeOut');
            }
        },

        // 上下滚动
        slideUpDown:{
            init:function($elem){
                $elem.height($elem.height());
                css3._init($elem,'sildeUpDownCollapse');
            },
            show:function($elem){
                css3._show($elem,'sildeUpDownCollapse');
            },
            hide:function($elem){
                css3._hide($elem,'sildeUpDownCollapse');
            }
        },
        // 左右滚动
        slideLeftRight:{
            init:function(){
                $elem.width($elem.width());
                css3._init($elem,'slideLeftRightCollapse');
            },

            show:function($elem){
                css3._show($elem,'slideLeftRightCollapse');
            },

            hide:function(){
                css3._hide($elem,'slideLeftRightCollapse');
            }

             
        },
        // 淡入淡出上下滚动
        fadeslideUpDown:{
            init:function(){
                $elem.height($elem.height());
                css3._init($elem,'fadeOut sildeUpDownCollapse');
            },
            show:function(){
                css3.show($elem,'fadeOut sildeUpDownCollapse');
            },
            hide:function(){
                css3.hide($elem,'fadeOut sildeUpDownCollapse');
            }
        },
        // 淡入淡出左右滚动
        fadeslideLeftRight:{
            init:function(){
                $elem.width($elem.width());
                css3._init($elem,'fadeOut sildeLeftRightCollapse');
            },
            show:function(){
                css3.show($elem,'fadeOut sildeLeftRightCollapse');
            },
            hide:function(){
                css3.hide($elem,'fadeOut sildeLeftRightCollapse');
            }
        }

    }
        // CSS3结束
    css3._init = function($elem,className){
        $elem.addClass('transition');
        init($elem,function(){
            $elem.addClass(className)
        });
    };


    css3._show=function($elem,className){
        show($elem,function () {
            $elem.off(transition.end).one(transition.end,function () {
                $elem.data('status','shown').trigger('shown');
            });
            $elem.show();
            setTimeout(function() {
                $elem.removeClass(className);
            }, 20);
        })
    }

    css3._hide=function($elem,className){
        hide($elem,function(){
            $elem.off(transition.end).one(transition.end,function(){
                $elem.data('status','hidden');
            })
                $elem.addClass(className);
        })
    }

    var js={
        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,'slideUpDown');
            },
            hide:function($elem){
                js._show($elem,'slideUpDown');
            }
        },

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

    js._init=function($elem,hiddenCallBack){
        $elem.removeClass('transition');
        init($elem,hiddenCallBack)
    }

    js._show=function($elem,mode){
        show($elem,function(){
            $elem.stop()[mode](function(){
                $elem.data('status','shown').trigger('shown');
            });
        });   
    }

    js._hide=function($elem,mode){
        show($elem,function(){
            $elem.stop()[mode](function(){
                $elem.data('status','hidden').trigger('hidden');
            });
        });   
    }

    js._customInit=function($elem,options){
        var styles={};
        for(var p in options){
            styles[p]=$elem.css(p);
        }
        $elem.data('styles',styles);

        js._init($elem,function(){
            $elem.css(options);
        });
    }

    js._customShow=function($elem){
        show($elem,function(){
            $elem.show();
            $elem.stop().animate($elem.data('styles'),function(){
                $elem.data('status','shown').trigger('shown');
            });
        });
    }

    js._customHide=function($elem,options){
        hide($elem,function(){
            $elem.stop().animate(options,function(){
                $elem.hide();
                $elem.data('status','hidden').trigger('hidden')
            })
        })
    }

    var defaults={
        css3:true,
        js:true,
        animation:'fade'
    }


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

        if(options.css3 && transition.isSupport){
            mode=css3[options.animation]||css3[defaults.animation]
        }else if(options.js){
            mode=js[options.animation]||js[defaults.animation]
        }else{
            mode=silent;
        }

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

        }
    }





    $.fn.extend({
        showHide:function(option){
            return this.each(function(){
                var $this=$(this),
                    options=$.extend({},defaults,typeof option ==='object'&& option),
                    mode=$this.data('showHide');

                    if(!mode){
                        $this.data('showHide',mode=showHide($this,options));
                    }

                    if(typeof mode[option]==='function'){
                        mode[option]();
                    }
            });
        }
    });




})(jQuery);

收起回答