老师我点击显示按钮后box显示了一秒钟就自动隐藏了
来源：2-4 用css3实现淡入淡出效果（1）
hyperse
2019-07-03 18:52:40
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示隐藏模块</title>
<link rel="stylesheet" href="../css/base.css" />
<style>
body{
width: 400px;
margin: 0 auto;
}
.btn{
width: 50%;
height: 30px;
}
#box{
display: none;
width: 100%;
height: 200px;
background-color: salmon;
}
.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;
opacity: 0;
}
</style>
</head>
<body>
<button id="btn-show" class="btn">显示</button><button id="btn-hide" class="btn">隐藏</button>
<div id="box" class="transition fadeOut"></div>
<script src="../js/jquery.js"></script>
<script src="../js/showHide.js"></script>
<script>
// var silent = {
// show:function($elem){
//// $elem.html('<p>我要显示了</p>');
//// if(typeof showCallback === 'function') showCallback();
// $elem.trigger('show');
// $elem.show();
// $elem.trigger('shown');
//// 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:{
// show:function(){
//
// },
// hide:function(){
//
// }
// },
// slideUpDown:{
// show:function(){
//
// },
// hide:function(){
//
// }
// },
// slideLeftRight:{
// show:function(){
//
// },
// hide:function(){
//
// }
// },
// fadeSlideUpDown:{
// show:function(){
//
// },
// hide:function(){
//
// }
// },
// fadeSlideLeftRight:{
// show:function(){
//
// },
// hide:function(){
//
// }
// }
// };
// 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(){
//
// }
// }
// };
var $box = $('#box');
//silent.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);
// 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','');
// },2000);
// }
// });
</script>
</body>
</html>
var silent = {
init:function($elem){
if($elem.is(':hidden')){ //hidden
$elem.data('status','hidden');
}else{ //shown
$elem.data('status','shown');
}
},
show:function($elem){
if($elem.data('status')==='show') return;
if($elem.data('status')==='shown') return;
$elem.data('status','show').trigger('show');
$elem.show();
$elem.data('status','shown').trigger('shown');
},
hide:function($elem){
if($elem.data('status')==='hide') return;
if($elem.data('status')==='hidden') return;
$elem.data('status','hide').trigger('hide');
$elem.hide();
$elem.data('status','hidden').trigger('hidden');
}
};
var css3 = {
fade:{
show:function($elem){
$elem.trigger('show');
$elem.on('transitionend',function(){
$elem.trigger('shown');
});
$elem.show();
setTimeout(function(){
$elem.removeClass('fadeOut');
},1000);
},
hide:function($elem){
$elem.trigger('hide');
$elem.on('transitionend',function(){
$elem.hide();
$elem.trigger('hidden');
});
$elem.addClass('fadeOut');
}
},
slideUpDown:{
show:function(){
},
hide:function(){
}
},
};
var js = {
};
视频里没有演示到，想知道这样对不对
1回答
-
好帮手慕星星
2019-07-03
你好，在2-4这个小节中这样写代码是可以的，和视频中一致。
同学提到的这个问题‘点击显示按钮后box显示了一秒钟就自动隐藏了’，是一个bug，是动画多次执行的结果。在2-5小节中老师解决了这个问题，可以继续往下面学习哦。
祝学习愉快！
0
相似问题