为什么在点击隐藏之后再点击显示会先出现后立刻自动消失呢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<style>
.show{
height:30px;
width:100px;
}
.hide{
height:30px;
width:100px;
}
.content{
display: none;
height:200px;
width:200px;
background-color: cornflowerblue;
}
#transition{
-o-transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
.fadeOut{
visibility: hidden;
opacity:0;
}
</style>
</head>
<body>
<button class="show">显示</button><button class="hide">隐藏</button>
<div class="content fadeOut" id="transition"></div>
<div>111</div>
<script src="js/jQuery.js"></script>
<script>
var $show = $('.show'),
$hide = $('.hide'),
$content = $('.content');
var silent = {
show:function($elem){
$elem.triggerHandler('show');
$elem.show();
$elem.trigger('shown');
},
hide:function($elem){
$elem.hide();
},
}
var fade = {
show:function($elem){
$elem.show();
setTimeout(function(){
$elem.removeClass('fadeOut');
},20);
},
hide:function($elem){
$elem.on('transitionend',function(){
$elem.hide();
})
$elem.addClass('fadeOut');
}
}
$show.on('click',function(){
fade.show($content);
})
$hide.on('click',function(){
fade.hide($content);
})
// $show.on('click',function(){
// silent.show($content);
// })
// $content.on('show shown',function(e){
// if(e.type === 'show'){
// $content.html('<p>111<p>');
// }else if(e.type === 'shown'){
// setTimeout(function(){
// $content.html($content.html()+'<p>222<p>');
// },1000);
// }
// });
// $hide.on('click',function(){
// silent.hide($content);
// });
</script>
</body>
</html>
正在回答
同学你好，这是因为当第一次点击隐藏按钮，执行hide方法中的代码后，会给元素绑定一个transitionend事件，即过渡结束后就好触发此事件。当点击显示时，显示的过渡效果结束后，就会触发transitionend事件，执行 $elem.hide();隐藏。如下把事件注释就可以了：
或者在显示的事件中，重新为元素绑定一个transitionend事件，事件要执行的内容为显示：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星