直接点显示没反应，只能先按隐藏再点显示才能显示
来源：2-5 用css3实现淡入淡出效果（2）
慕仰3297879
2020-03-30 16:23:05
<!DOCTYPE html>
<html>
<head>
<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: green;
}
.transition{
-o-transition: all .5s;
-webkit-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
transition: all .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>
<button class="btn">显示2</button>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/showhide.js"></script>
<script type="text/javascript">
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);
});
</script>
</body>
</html>
var silent = {
init:function($elem){
if ($elem.is('hidden')) {
$elem.data('status','hidden');
}else{
$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:{
init:function($elem){
if ($elem.is('hidden')) {
$elem.data('status','hidden');
}else{
$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.one('transitionend',function(){
$elem.data('status','shown').trigger('shown');
});
$elem.show();
setTimeout(function(){
$elem.removeClass('fadeOut');
},20)
},
hide:function($elem){
if($elem.data('status')==='hide') return;
if($elem.data('status')==='hidden') return;
$elem.data('status','hide').trigger('hide');
$elem.trigger('hide');
$elem.one('transitionend',function(){
$elem.data('status','hidden').trigger('hidden');
})
$elem.addClass('fadeOut')
}
},
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(){
}
}
}
1回答
-
同学你好，是因为如下判断中，hidden前面没有加冒号，导致初始化时执行else，为元素添加了shown。当第一次点击显示按钮，判断状态为shown，所以不会执行显示了。
另外，在隐藏的方法中，要添加hide方法把元素真正的隐藏。即相当于设置了display:none，这样他才不会占据页面的位置。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题