体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

问能下错在哪了吗？

来源：2-9 用js实现其他显示隐藏效果

慕容5109188

2019-10-29 22:32:38

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>显示隐藏</title>
   <link rel="stylesheet" type="text/css" href="CSS/base.css">
   <style>
       body{
           width: 400px;
           margin: 0 auto;
       }
       .btn{
           width: 50%;
           height: 30px;
       }
       #box{
           display: none;
           width: 100%;
           /*height: 200px;*/
           /*padding: 100px 0;*/
           background-color: red;
       }
       .transition{
           -o-transition: all 0.5s;
           -moz-transition: all 0.5s;
           -webkit-transition: all 0.5s;
           -ms-transition: all 0.5s;
           transition: all 0.5s;
       }
       .fadeOut{
           visibility: hidden;
           opacity: 0;
       }
       .slideUpDownCollapse{
           height: 0 !important;
           padding-top: 0 !important;
           padding-bottom: 0 !important;
       }
       .slidLeftRightCollapse{
           width: 0 !important;
           padding-left: 0 !important;
           padding-right: 0 !important;
       }
   </style>
</head>
<body>

<button id="btn-show" class="btn">显示</button><button id="btn-hide" class="btn">隐藏</button>
<div id="box" class="transition">
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
</div>
<button id="btn-show2" class="btn">显示2</button>
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript" src="JS/transition.js"></script>
<script type="text/javascript" src="JS/showHide.js"></script>
<script>
   // var silent = {
   //     show:function ($elem){
   //         // $elem.html('<p>我要显示了</p>');
   //         //2 if (typeof showCallback === 'function') showCallback();
   //         $elem.trigger('show');
   //         $elem.show();
   //         $elem.trigger('shown');
   //         //2 if (typeof shownCallback === 'function') shownCallback();
   //         // setTimeout(function () {
   //         //     $elem.html($elem.html()+'<p>我已经显示了</p>');
   //         // },1000);
   //     },
   //     hide:function ($elem) {
   //         $elem.trigger('hide');
   //         $elem.hide();
   //         $elem.trigger('hidden');
   //     }
   // };
   // var css3 = {
   //     fade:{
   //
   //     },
   //     slideUpdown:{
   //
   //     },
   //     slidLeftRight:{
   //
   //     },
   //     fadeSlideUpDown:{
   //
   //     },
   //     fadeLeftRight:{
   //
   //     }
   // };
   // var js = {
   //     fade:{
   //
   //     },
   //     slideUpdown:{
   //
   //     },
   //     slidLeftRight:{
   //
   //     },
   //     fadeSlideUpDown:{
   //
   //     },
   //     fadeLeftRight:{
   //
   //     }
   // };
  console.log( window.mt.transition.end)
  console.log( window.mt.transition.isSupport)
   var $box = $('#box');
   js.fadeSlideUpDown.init($box);

   $('#btn-show').on('click',function () {
      js.fadeSlideUpDown.show($box)
   });
   $('#btn-hide').on('click',function () {
       js.fadeSlideUpDown.hide($box)
   });
   //小A
   $box.on('show shown hide hidden',function (e) {
       console.log(e.type);
       // if (e.type == 'show'){
       //     $box.html('<p>我要显示了</p>');
       // } else if (e.type == 'shown'){
       //     setTimeout(function () {
       //         $box.html($box.html()+'<p>我已经显示了</p>');
       //     },1000);
       // }
   })

   //小C
   // $box.on('show shown',function (e) {
   //     // console.log(e.type);
   //     if (e.type == 'show'){
   //         $box.css('background-color','yellow');
   //     } else if (e.type == 'shown'){
   //         setTimeout(function () {
   //             $box.css('background-color','');
   //         },1000);
   //     }
   // })

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


var transition = window.mt.transition;


function init($elem, hiddenCallback) {
   if ($elem.is(':hidden')) { //hidden
       $elem.data('status', 'hidden');
       if (typeof hiddenCallback === 'function') hiddenCallback();
       // $elem.addClass('fadeOut');
   } else { //show
       // $elem.data('status', 'shown');
   }
}

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

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');
       });
   }
};
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, 'slideUpDownCollapse');
       },
       show: function ($elem) {
           css3._show($elem, 'slideUpDownCollapse');
       },
       hide: function ($elem) {
           css3._hide($elem, 'slideUpDownCollapse');
       }
   },
   slidLeftRight: {
       init: function ($elem) {
           $elem.width($elem.width());
           css3._init($elem, 'slidLeftRightCollapse');
       },
       show: function ($elem) {
           css3._show($elem, 'slidLeftRightCollapse');
       },
       hide: function ($elem) {
           css3._hide($elem, 'slidLeftRightCollapse');
       }
   },
   fadeSlideUpDown: {
       init: function ($elem) {
           $elem.height($elem.height());
           css3._init($elem, 'fadeOut slideUpDownCollapse');
       },
       show: function ($elem) {
           css3._show($elem, 'fadeOut slideUpDownCollapse');
       },
       hide: function ($elem) {
           css3._hide($elem, 'fadeOut slideUpDownCollapse');
       }
   },
   fadeLeftRight: {
       init: function ($elem) {
           $elem.width($elem.width());
           css3._init($elem, 'fadeOut slidLeftRightCollapse');
       },
       show: function ($elem) {
           css3._show($elem, 'fadeOut slidLeftRightCollapse');
       },
       hide: function ($elem) {
           css3._hide($elem, 'fadeOut slidLeftRightCollapse');
       }
   }
};
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.hide();
           $elem.data('status', 'hidden').trigger('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) {
           show($elem, function () {
               js._show($elem, 'slideDown');
           });
       },
       hide: function ($elem) {
           js._hide($elem, 'slideUp');
       }
   },
   slidLeftRight: {
       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
               });
       }
   },
   fadeLeftRight: {
       show: function () {

       },
       hide: function () {

       }
   }
};
js._init = function ($elem,hiddenCallBack) {
   $elem.removeClass('transition');
   init($elem,hiddenCallBack);
};
js._customInit = function ($elem,options) {
   var styles = {};
   for (var p in options){
       styles[p] = $elem.css(p)
   }
};
js._show = function ($elem, mode) {
   show($elem, function () {
       $elem.stop()[mode](function () {
           $elem.data('status', 'shown').trigger('shown');
       });
   });
};
js._customShow = function($elem){
   show($elem, function () {
       $elem.show();
       //动画执行和执行完毕
       $elem.stop().animate($elem.data('styles'), function () {
           $elem.data('status', 'shown').trigger('shown');
       });
   });
};
js._hide = function ($elem, mode) {
   hide($elem, function () {
       $elem.stop()[mode](function () {
           $elem.data('status', 'hidden').trigger('hidden');
       });
   });
};
js._customHide = function ($elem,options) {
   hide($elem, function () {
       //动画执行和执行完毕
       $elem.stop().animate(options, function () {
           $elem.hide();
           $elem.data('status', 'hidden').trigger('hidden');
       });
   });
}

写回答

2回答

好帮手慕言

2019-10-30

同学自己找到问题并解决，很棒哦，给你点赞，继续加油，祝学习愉快~

0

慕容5109188

提问者

2019-10-29

找到了

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

0

0 学习 · 14456 问题

查看课程

相似问题

别的效果是对的，但是加载动画一直在加载，无法变为需要的内容，哪儿错了（删除定时器也不行）

回答 2

老师，帮忙看一下代码哪里出了问题，谢谢

回答 3

程序报错，哪里的问题呢？

回答 2

为什么 js.slideLeftRight.show = js._customShow; 会报错？

回答 2

下拉菜单的高度与loading图片的高度一致，却没法与加载的内容高度一致

回答 2

打开慕课网App查看更多内容