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

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

http://img1.sycdn.imooc.com//climg/5e082d240964a57c19851297.jpg

链接：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类名错误，少了一个字母，要细心哦：

http://img1.sycdn.imooc.com//climg/5e087fd70917e8ec05580182.jpg

导致过渡不起作用。

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

祝学习愉快！

0
收起回答
提问者 琥珀_2020 2019-12-29 17:43:09
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
(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);




0
收起回答
好帮手慕星星 2019-12-29 17:03:55

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

祝学习愉快！

0
收起回答
  • 提问者 琥珀_2020 #1
    我知道呢 老师 我把代码放链接了呢 您下载打开就看得到 很方便 ?
    2019-12-29 17:32:08
提问者 琥珀_2020 2019-12-29 15:23:18

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

0
收起回答
提问者 琥珀_2020 2019-12-29 13:46:15

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

0
收起回答
提问者 琥珀_2020 2019-12-29 13:20:10

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

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师，为什么我的下拉菜单不显示呢？
20 0 3
老师帮我解答下吧 为什么实现不了淡入淡出效果?
28 5 13
侧边栏淡入淡出效果
0 0 3
演示中图片的淡入淡出效果没有实现
6 0 3
css3淡入淡出
7 0 1

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

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

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

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

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

22 4

2-11检查

78 1

老师，这样对吗

80 1

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

56 1

查看更多本课问答
请稍等 ...
微信客服

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码