为什么会出现如下问题
来源：2-7 css3实现其他显示隐藏效果
Kunagisa_
2020-01-28 18:56:49
以下是html
<!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: 100%;
height: 200px;
background-color: red;
overflow: hidden;
}
.transition{
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .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"></div>
<script src="js/jQuery-3.4.1.js"></script>
<script src="js/transition.js"></script>
<script src="js/showHide.js"></script>
<script type="text/javascript">
// console.log(window.mt.transition.end);
// console.log(window.mt.transition.isSupport);
var $box = $('#box');
css3.fade.init($box);
$('#btn-show').on('click',function(){
css3.fade.show($box);
});
$('#btn-hide').on('click',function(){
css3.fade.hide($box);
});
// 小A
$box.on('show shown hide hidden',function(e){
console.log(e.type);
})
</script>
</body>
</html>以下是js
(function($){
var transition = window.mt.transition;
function init($elem,hiddenCallback){
if($elem.is(':hidden')){
$elem.data('status','hidden');
if(typeof hiddenCallback === 'function') hiddenCallback();
}else{
$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');
}
},
slideLeftRight:{
init: function($elem) {
$elem.width($elem.width());
css3._init($elem, 'slideLeftRightCollapse');
},
show: function($elem) {
css3._show($elem, 'slideLeftRightCollapse');
},
hide: function($elem) {
css3._hide($elem, 'slideLeftRightCollapse');
}
},
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');
}
},
fadeSlideLeftRight:{
init: function($elem) {
$elem.width($elem.width());
css3._init($elem, 'fadeOut slideLeftRightCollapse');
},
show: function($elem) {
css3._show($elem, 'fadeOut slideLeftRightCollapse');
},
hide: function($elem) {
css3._hide($elem, 'fadeOut slideLeftRightCollapse');
}
}
};
css3._init = funtion($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:{
show:function(){
},
hide:function(){
}
},
slideUpDown:{
show:function(){
},
hide:function(){
}
},
slideLeftRight:{
show:function(){
},
hide:function(){
}
},
fadeSlideUpDown:{
show:function(){
},
hide:function(){
}
},
fadeSlideLeftRight:{
show:function(){
},
hide:function(){
}
}
}
})(jQuery);控制台会出现如下错误
写回答
3回答
-
同学你好，测试同学提供的代码，js文件中还多出了一个花括号，如下：
另外，从报错信息上可以看到css3没有定义，原因是在自执行函数里面声明的是局部变量，外部获取不到。所以会报错。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
Kunagisa_
提问者
2020-01-29
第二条错误经由去掉js中最外层的包裹得以解决，感觉是作用域的问题但还不是很清楚，希望老师可以讲解一下
0 -
Kunagisa_
提问者
2020-01-29
第一条错误的原因已经发现了，是_init的function拼写错误。说css3未定义的错误是因为什么呢
0
相似问题