看一下是不是我的浏览器的问题为什么控制里面什么也没有明明写了还几个console了还有为什么没有获取到box的宽高没有显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 400px;
margin: 0 auto;
}
.btn {
width: 50%;
height: 30px;
}
#box {
display: none;
margin-top: -20px;
width: 100%;
height: 200px;
background: red;
}
.transition {
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.fadeout {
visibility: hidden !important;
opacity: 1 !important;
}
.slideupdowncollapse{
height:0 !important;
}
.slideleftright{
width:0 !important;
}
</style>
</head>
<body>
<button id="btn-show" class="btn">显示</button><button id="btn-hide" class="btn">隐藏</button>
<div id="box" class=""></div>
<button class="btn">显示1</button>
<script src="js/jquery-1.7.1.js"></script>
<script src="js/transition.js"></script>
<script>
console.log(window.mt.transition.isSupport)
var transition = window.mt.transition;
//console.log(window.mt.transition.end);
function init($elem, hiddencallback) {
if ($elem.is(':hidden')) {
$elem.data('status', 'hidden')
if (typeof hiddencallback === 'function') hiddencallback();
// $elem.addClass('slideupdowncollapse')
} 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) {
// if(typeof showcallback==='function')showcallback();
show($elem, function () {
$elem.show();
$elem.data('status', 'shown').trigger('shown');
callback;
})
// if(typeof showncallback==='function')showncallback();
},
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,'slideleftright');
},
show: function ($elem) {
css3._show($elem,'slideleftright')
},
hide: function ($elem) {
css3._hide($elem,'slideleftright')
}
},
fadeslideupdown: {
init: function ($elem) {
$elem.height($elem.height());
css3._init($elem,' fadeout slideupdowncollapse');
},
show: function ($elem) {
css3._show($elem,'slideupdowncollapse fadeout ')
},
hide: function ($elem) {
css3._hide($elem,'slideupdowncollapse fadeout ')
}
},
fadeslideleftright: {
init: function ($elem) {
$elem.width($elem.width());
css3._init($elem,'slideleftright fedeout');
},
show: function ($elem) {
css3._show($elem,'slideleftright fedeout')
},
hide: function ($elem) {
css3._hide($elem,'slideleftright fedeout')
}
}
};
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
})
}
},
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 () {
js._customhide($elem,{
'opacity':0,
'height':0,
'padding-top':0,
'padding-bottom':0
})
}
},
fadeslideleftright: {
init:function($elem){
js._customInit($elem,{
'opacity':1,
'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
})
}
}
};
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);
});
}
js._init=function($elem,hiddencallback){
$elem.removeClass('transition');
init($elem,hiddencallback);
}
js._show=function($elem,mode){
show($elem,function(){
$elem.stop()[mode](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._customInit=function($elem,options){
var styles={};
for(var p in options){
styles[p]=$elem.css(p);
}
console.log(styles)
js._init($elem,function(){
$elem.css(options);
});
}
js._customshow=function($elem ){
show($elem,function(){
$elem.show();
$elem.stop().animate($elem.data('styles'),
function(){
$elem.data('status','shown').trigger('shown');
});
})
}
js._customhide=function($elem ,options){
hide($elem,function(){
$elem.stop().animate(options,function(){
$elem.hide();
$elem.data('status','hidden').trigger('hidden');
});
});
}
var $box = $('#box');
js.fadeslideleftright.init($box);
$('#btn-hide').on('click', function () {
js.fadeslideleftright.hide($box);
});
$('#btn-show').on('click', function () {
js.fadeslideleftright.show($box)
});
// silent.init($box);
// $('#btn-show').on('click',function(){
// css3.fade.show($box)
// });
// $box.on('show shown hide hidden',function(e){
// console.log(e.type)
// })
// $box.on('show shown',function(e){
// if(e.type==='show'){
// $box.css('background','yellow')
// }else if(e.type==='shown'){
// setTimeout(function(){
// $box.css('background','')
// },1000)
// }
// })
$box.on('show shown hide hidden', function (e) {
console.log(e.type)
})
console.log(sfdsfdghb)
</script>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，老师猜测同学引入的js名称跟课件中提供的js名称有出入，老师测试了同学的代码。是可以的。如下：
另外show、hide与没有打印错误无关。如下：
同学看看自己js文件件中的jq文件名称是不是在引入的时候写错了。祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星