老师帮我看下为啥没有淡入淡出效果

链接：https://share.weiyun.com/5VyET5o

我把代码打包上传微云了方便老师看代码麻烦老师下载下帮我看下呢

琥珀_2020 2019-12-29

源自：实战：下拉菜单组件化 3-1 用showHide改写dropdown模块

21

收起

6回答

好帮手慕星星回答被采纳获得+3积分 2019-12-29 18:30:34

同学你好，问题解答如下：

1、showHide.js文件中添加transition类名错误，少了一个字母，要细心哦：

导致过渡不起作用。

2、测试slideUpDown动画没有问题，同学说的bug指的是什么样的效果呢，建议描述具体一些，便于帮助你解决。

祝学习愉快！

提问者琥珀_2020 2019-12-29 17:43:09

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <title>dropDown</title>
    <style>
        .dropdown {
            position: relative;
            /* margin: 150px; */
        }

        .dropdown-toggle {
            position: relative;
            z-index: 2;
        }

        /* 下拉箭头 */
        .dropdown-arrow {
            display: inline-block;
            text-align: center;
            vertical-align: text-top;
            
        }

        .dropdown-layer {
            display: none;
            overflow: hidden;
            position: absolute;
            z-index: 1;
        }

        .dropdown-left {
            left: 0;
            right: auto;
        }

        .dropdown-right {
            right: 0;
            left: auto;
        }

        /* menu dropdown */

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

        .menu .dropdown-arrow {
            width: 15px;
            height: 15px;
            line-height: 15px;
            margin-left: 5px;
        }

        .menu .dropdown-layer {
            /* top: 44px; */
            top: 100%;
            border: 1px solid #cdd0d4;
            background-color: #fff;
        }

        .menu-item {
            display: block;
            height: 30px;
            padding: 0 12px;
            line-height: 30px;
            white-space: nowrap;
            color: #4d555d;
        }

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

        /* css hover 实现显示隐藏 */

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

        /* 下拉箭头效果 */
        [class *= "-active"] .dropdown-arrow {
            transform: rotate(180deg);
        }

        .transition {
            transition: all 0.3s;
        }
        /* .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;
        }
        

    </style>
</head>

<body>

    <div class="menu dropdown fl" data-active="menu">
        <a href="" class="dropdown-toggle">我的慕淘<i class="iconfont dropdown-arrow transition">&#xe638;</i></a>
        <ul class="dropdown-layer dropdown-left">
            <li><a href="###" class="menu-item">已买到宝贝</a></li>
            <li><a href="###" class="menu-item">我的足迹</a></li>
        </ul class="dropdown-layer">
    </div>


    <script src="./js/jquery.js"></script>
    <script src="./js/transition.js"></script>
    <script src="./js/showHide.js"></script>
    <script src="./js/dropDown.js"></script>
    <script>

        $('.dropdown').dropdown({
            css3: true,
            js: true,
            animation: 'fade'             
        });
        

    </script>
</body>

</html>

s

(function ($) {
    'use strict';
    
    function dropdown(elem, options) {
        var $elem = $(elem),
            $layer = $elem.find('.dropdown-layer'),
            activeClass = $elem.data('active') + '-active';
        
        $layer.showHide(options); 
        
        $elem.hover(function () {
            $elem.addClass(activeClass);
            $layer.showHide('show');
        }, function () {
            $elem.removeClass(activeClass);
            $layer.showHide('hide');
        });
    };

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

    $.fn.extend({
        dropdown: function (option) {
            return this.each(function () {
                var options = $.extend({}, defaults, option);
                dropdown(this,options);
            });
        }
    });

    console.log($('.dropdown').animation)
    console.log($('.dropdown').showHide('show'))
    
    
})(jQuery);

好帮手慕星星 2019-12-29 17:03:55

同学你好，建议将自己写的代码粘贴到问答区中（不要截图），便于测试解决，准确定位问题所在。

祝学习愉快！

提问者琥珀_2020 #1

我知道呢老师我把代码放链接了呢您下载打开就看得到很方便 ?

2019-12-29 17:32:08

提问者琥珀_2020 2019-12-29 15:23:18

在吗老师卡在这里好难受啊救命~ %5555~

提问者琥珀_2020 2019-12-29 13:46:15

animation 效果实现不了用slideUpDown 也会有bug

提问者琥珀_2020 2019-12-29 13:20:10

keke 有人吗在线等zhong~ $ QwQ $

相似问题

老师，为什么我的下拉菜单不显示呢？

老师帮我解答下吧为什么实现不了淡入淡出效果?

侧边栏淡入淡出效果

演示中图片的淡入淡出效果没有实现

css3淡入淡出

登录后可查看更多问答，登录/注册

2.组件化网页开发

参与学习人
提交作业 1121 份
解答问题 14456 个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

本课精华内容

问答作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号