控制台报错
来源：2-11 将显示隐藏封装成模块--完善
慕后端5428016
2019-12-11 20:03:16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示隐藏模块</title>
<link rel="stylesheet" type="text/css" href="../css/base.css">
<style type="text/css">
body{
width: 400px;
margin: 0 auto;
}
.btn{
width: 50%;
height: 30px;
}
#box{
display: none;
width: 400px;
/*height: 200px;
padding: 100px 0;*/
background: red;
overflow: hidden;
}
.transition{
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-webkit-transition:all 0.5s;
transition:all 0.5s;
}
.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>
<button id="btn-show" class="btn">显示</button><button id="btn-hide" class="btn">隐藏</button>
<div id="box" class="">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<script src="../js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="../js/transition.js"></script>
<script type="text/javascript" src="../js/showhide.js"></script>
<script type="text/javascript">
//console.log(window.mt.transition.end);
//console.log(window.mt.transition.isSupport);
var $box=$('#box');
var showHide=window.mt.showHide($box,{
css3:true,
animation:'fade'
});
//js.fadeSildeLeftRight.init($box);
$('#btn-show').on('click',function(){
//js.fadeSildeLeftRight.show($box);
showHide.show($box);
});
$('#btn-hide').on('click',function(){
//js.fadeSildeLeftRight.hide($box);
showHide.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){
if(e.type==='show'){
$box.css('background-color','yellow');
}else if(e.type==='shown'){
setTimeout(function(){
$box.css('background-color','');
},1000);
}
});*/
</script>
</body>
</html>
(function($) {
'use strict';
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 { //shown
$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');
}
},
sildeLeftRight: {
init: function($elem) {
css3._init($elem, 'slideLeftRightCollapse');
},
show: function($elem) {
css3._show($elem, 'slideLeftRightCollapse');
},
hide: function($elem) {
css3._hide($elem, 'slideLeftRightCollapse');
}
},
fadeSildeUpDown: {
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');
}
},
fadeSildeLeftRight: {
init: function($elem) {
css3._init($elem, 'fadeOut slideLeftRightCollapse');
},
show: function($elem) {
css3._show($elem, 'fadeOut slideLeftRightCollapse');
},
hide: function($elem) {
css3._hide($elem, 'fadeOut slideLeftRightCollapse');
}
}
};
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) {
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
});
}
},
fadeSildeUpDown: {
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
});
}
},
fadeSildeLeftRight: {
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._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._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');
});
});
};
var defaults = {
css3: false,
js: false,
animation: 'fade'
};
function showHide($elem, options) {
var mode = null;
options = $extend({}, defaults, options);
if (options.css3 && transition.isSupport) { //css3 transition
mode = css3[options.animation] || css3[defaults.animation];
} else if (options.js) { //js animation
mode = js[options.animation] || js[defaults.animation];
} else { //no animation
mode = silent;
}
mode.init($elem);
return {
show: mode.show,
hide: mode.hide
};
}
window.mt=window.mt || {};
window.mt.showHide=showHide;
})(jQuery);
(function(){
var transitionEndEventName={
transition:'transitionend',
MozTransition:'transitionend',
WebkitTransition:'webkittransitionend',
OTransition:'oTransitionend otransitionend'
};
var transitionEnd='',
isSupport=false;
for(var name in transitionEndEventName){
if (document.body.style[name]!==undefined){
transitionEnd=transitionEndEventName[name];
isSupport=true;
break;
}
}
window.mt=window.mt || {};
window.mt.transition={
end:transitionEnd,
isSupport:isSupport
}
})()
2回答
-
慕后端5428016
提问者
2019-12-12
错误找到了
0 -
好帮手慕言
2019-12-12
同学你好，使用同学提供的代码测试，控制台有报错，报错信息如下：
从报错信息里可以得知在showhide.js文件中的585行有问题。看代码，发现$与extend之间少了一个点。可以参考下图修改：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题