请老师帮忙检查下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="js/jquery.js"></script>
<style type="text/css">
.container{
padding:0;
width: 500px;
height: 400px;
margin: 0 auto;
}
#box{
display:none;
width: 500px;
height: 300px;
background:#742A2A;
}
input{
width: 49%;
margin: 0;
padding:0;
}
.transition{
-webkit-transition: all 1s ;
-moz-transition: all 1s ;
-ms-transition: all 1s ;
-o-transition: all 1s ;
transition: all 1s ;
}
.fadeout{
visibility: visible!important;
opacity:0!important;
}
.slideUpDowncollapse{
height: 0!important;
padding-top:0!important;
padding-bottom:0!important;
}
.slideLeftRightcollapse{
width: 0 !important;
padding-right:0!important;
padding-left:0!important;
}
</style>
</head>
<body>
<div class="container ">
<input class="show" type="button" value="显示">
<input class="hide" type="button" value="隐藏">
<div id="box">
</div>
</div>
<script src="js/transitonend.js"></script>
<script src="js/showhide1.js"></script>
<script>
var $box=$('#box');
// css3.slideUpDown.init($box);
$('.show').on('click', function(event) {
// css3.slideUpDown.show($('#box'));
window.mt.showHide($box,{
css3:true,
animation:'slideLeftRight'
}).show();
});
$box.on('show shown hide hiden', function(event) {
console.log(event.type)
});
$('.hide').on('click', function(event) {
// css3.slideUpDown.hide($('#box'));
window.mt.showHide($box,{
css3:true,
animation:'slideLeftRight'
}).hide();
});
</script>
</body>
</html>
下面是封装的JS
(function($){
var transition=window.mt.transition;
function init($elmen,hidecallback){
if ($elmen.is(':hidden')) {
$elmen.data('status','hiden')
if (typeof hidecallback =='function')hidecallback();
}else{
$elmen.data('status','shown')
};
}
function show($elmen,callback){
if ($elmen.data('status')==='show')return;
if ($elmen.data('status')==='shown')return;
$elmen.data('status','show').trigger('show');
callback()
}
function hide($elmen,callback) {
if ($elmen.data('status')==='hide')return;
if ($elmen.data('status')==='hiden')return;
$elmen.data('status','hide').trigger('hide');
callback()
}
var silent={
init:init,
show:function($elmen){
show($elmen,function(){
$elmen.show();
$elmen.data('status','shown').trigger('shown');
})
},
hide:function($elmen){
hide($elmen,function(){
$elmen.hide();
$elmen.data('status','hiden').trigger('hiden');
})
}
};
var css3={
_init:function($elmen,className){
$elmen.addClass('transition')
init($elmen,function() {
$elmen.addClass(className);
})
},
_show:function($elmen,className){
show($elmen,function(){
$elmen.show();
$elmen.off(transition.end).one(transition.end,function(event) {
$elmen.data('status','shown').trigger('shown');
});
setTimeout(function(){$elmen.removeClass(className)},20);
})
},
_hide:function($elmen,className){
debugger;
hide($elmen,function(){
$elmen.off(transition.end).one(transition.end, function() {
$elmen.hide();
$elmen.data('status','hiden').trigger('hiden');
});
$elmen.addClass(className);
})
},
fade:{
init:function($elmen){
css3._init($elmen,'fadeout')
},
show:function($elmen){
css3._show($elmen,'fadeout')
},
hide:function($elmen){
css3._hide($elmen,'fadeout')
}
},
slideUpDown:{
init:function($elmen){
$elmen.height($elmen.height());
css3._init($elmen,'slideUpDowncollapse');
},
show:function($elmen){
css3._show($elmen,'slideUpDowncollapse');
},
hide:function($elmen){
css3._hide($elmen,'slideUpDowncollapse');
}
},
slideLeftRight:{
init:function($elmen){
$elmen.width($elmen.width())
css3._init($elmen,'slideLeftRightcollapse')
},
show:function($elmen){
css3._show($elmen,'slideLeftRightcollapse')
},
hide:function($elmen){
css3._hide($elmen,'slideLeftRightcollapse')
}
},
fadeSlideUpDown:{
init:function($elmen){
$elmen.height($elmen.height());
css3._init($elmen,'fadeout slideUpDowncollapse');
},
show:function($elmen){
css3._show($elmen,'fadeout slideUpDowncollapse');
},
hide:function($elmen){
css3._hide($elmen,'fadeout slideUpDowncollapse');
}
},
fadeSlideLeftRight:{
init:function($elmen){
$elmen.width($elmen.width())
css3._init($elmen,'fadeout slideLeftRightcollapse')
},
show:function($elmen){
css3._show($elmen,'fadeout slideLeftRightcollapse')
},
hide:function($elmen){
css3._hide($elmen,'fadeout slideLeftRightcollapse')
}
},
};
var js={
_init:function($elmen,hidecallback){
$elmen.removeClass("transition");
init($elmen,hidecallback);
},
_castomInit:function($elmen,options){
$elmen.removeClass('transiton')
var style={};
for(var p in options){
style[p]=$elmen.css(p)
}
$elmen.data('style', style);
js._init($elmen,function(){
$elmen.css(options);
})
},
_show:function($elmen,mode){
show($elmen,function(){
$elmen.stop()[mode](function() {
$elmen.data('status','shown').trigger('shown');
});
})
},
_castomShow:function($elmen) {
$elmen.show();
show($elmen,function(){
$elmen.animate($elmen.data('style'),function(){
$elmen.data('status','shown').trigger('shown');
})
})
},
_hide:function($elmen,mode){
hide($elmen,function(){
$elmen.stop()[mode](function() {
$elmen.data('status','hiden').trigger('hiden');
});
})
},
_castomHide:function($elmen,options) {
hide($elmen,function(){
$elmen.animate(options,function(){
$elmen.hide();
$elmen.data('status','hiden').trigger('hiden');
})
})
},
fade:{
init:function($elmen){
js._init($elmen)
},
show:function($elmen){
js._show($elmen,'fadeIn')
},
hide:function($elmen){
js._hide($elmen,'fadeOut')
}
},
slideUpDown:{
init:function($elmen){
js._init($elmen)
},
show:function($elmen){
js._show($elmen,'slideDown')
},
hide:function($elmen){
js._hide($elmen,'slideUp')
}
},
slideLeftRight:{
init:function($elmen){
js._castomInit($elmen,{
'width':'0',
'pading-left':'0',
'pading-right':'0'
})
},
show:function($elmen) {
js. _castomShow($elmen)
},
hide:function($elmen) {
js._castomHide($elmen,{
'width':'0',
'pading-left':'0',
'pading-right':'0'
})
}
},
fadeSlideUpDown:{
init:function($elmen){
js._castomInit($elmen,{
'height':'0',
'opacity':'0',
'pading-top':'0',
'pading-buttom':'0'
})
},
show:function($elmen) {
js. _castomShow($elmen)
},
hide:function($elmen) {
js._castomHide($elmen,{
'height':'0',
'opacity':'0',
'padding-top':'0',
'pading-buttom':'0'
})
}
},
fadeSlideLeftRight:{
init:function($elmen){
js._castomInit($elmen,{
'width':'0',
'opacity':'0',
'pading-left':'0',
'pading-right':'0'
})
},
show:function($elmen) {
js. _castomShow($elmen)
},
hide:function($elmen) {
js._castomHide($elmen,{
'width':'0',
'opacity':'0',
'pading-left':'0',
'pading-right':'0'
})
}
}
};
var defaults = {
css3: true,
js: true,
animation: 'fade'
};
function showHide($elem, options) {
var mode = null;
options = $.extend({}, defaults, options);
if (options.css3 && transition.isSupport) { //css3 transition
// css3[options.animation].init($elem);
mode = css3[options.animation] || css3[defaults.animation];
// return {
// // show:css3[options.animation].show,
// // hide:css3[options.animation].hide
// };
} else if (options.js) { //js animation
// js[options.animation].init($elem);
// return {
// show: js[options.animation].show,
// hide: js[options.animation].hide
// };
mode = js[options.animation] || js[defaults.animation];
} else { // no animation
// silent.init($elem);
// return {
// show: silent.show,
// hide: silent.hide
// };
mode = silent;
}
mode.init($elem);
return {
// show: mode.show,
// hide: mode.hide
show: $.proxy(mode.show, this, $elem),
hide: $.proxy(mode.hide, this, $elem),
};
}
window.mt = window.mt || {};
window.mt.showHide = showHide;
})(jQuery)
出现一个BUG就是点击隐藏会把高度和宽度设置为0 然后点击显示宽度还是0
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星