css3淡入淡出
<!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>显示与隐藏模块</title>
<link rel="stylesheet" href="../../作业素材/code/css/base.css">
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/showhide.js"></script>
<style>
body {
width: 400px;
margin: 0 auto;
}
.btn {
width: 50%;
height: 30px;
}
#box {
display: none;
position: absolute;
width: 100%;
height: 200px;
background-color: red;
}
.transition {
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
}
.fadeOut {
visibility: visible;
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>
// var silent = {
// show: function($elem) {
// // 方法一： $elem.html('<P>我要显示了</P>'); 将函数要执行的语句放在实例化函数中执行
// // $elem.html('<P>我要显示了</P>'); 将函数要执行的语句放在实例化函数中执行
// // setTimeout(function() { 将函数要执行的语句放在实例化函数中执行
// // $elem.html($elem.html() + '<P>我已经显示了</P>');
// // }, 1000)
// // 方法二：
// // show:function($elem,showCallback,shownCallback){
// // if (typeof showCallback === 'function') { //适合发布订阅的方式，发布消息就是触发事件，订阅消息就是绑定事件
// // showCallback();
// // }
// // $elem.show(); show方法是需要jq对象元素来调用的，不能是函数调用
// // if (typeof shownCallback === 'function') {
// // shownCallback();
// // }
// // 方法三：
// $elem.trigger('show');
// $elem.show();
// $elem.trigger('shown');
// },
// 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');
// 方法二的调用
// $('#btn-show').on('click', function() {
// silent.show($box, function() {
// $box.html('<P>我要显示了</P>');
// }, function() {
// setTimeout(function() {
// $box.html($box.html() + '<P>我已经显示了</P>');
// }, 1000)
// });
// });
// silent.init($box); //初始化，只执行一次
// 发布：触发事件
$('#btn-show').on('click', function() {
// silent.show($box);
css3.fade.show($box);
});
$('#btn-hide').on('click', function() {
// silent.hide($box);
css3.fade.hide($box);
});
// 订阅：接收事件
$box.on('show shown hide hidden', function(e) {
// console.log(e); 打印结果是show shown hide hidden
if (e.type === 'show') {
$box.html('<P>我要显示了</P>');
} else if (e.type === 'shown') {
setTimeout(function() {
$box.html($box.html() + '<P>我已经显示了</P>');
}, 1000)
}
});
// 订阅：接收事件
$box.on('show shown', function(e) {
if (e.type === 'show') {
$box.css('backgroundColor', 'yellow');
} else if (e.type === 'shown') {
setTimeout(function() {
$box.css('backgroundColor', '');
}, 1000)
}
});
// 以上两个接收事件改变内容互补影响，不用在各自接收事件上修改程序，方便多人协作，发布消息（触发事件），新增者只需订阅发布者的消息(绑定消息)就可以修改
</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; //当已是显示状态，不再重复执行show的代码
if ($elem.data('status') === 'shown') return; //当已是显示状态，不再重复执行shown的代码
// 第一次没执行状态，status是undefined，当执行完第一次之后，status是show 不再重复执行代码
$elem.data('status', 'show').trigger('show'); //将status设置为show
$elem.show();
$elem.data('status', 'shown').trigger('shown');
},
hide: function($elem) {
if ($elem.data('status') === 'hide') return; //当已是隐藏状态，不再重复执行show的代码
if ($elem.data('status') === 'hidden') return; //当已是隐藏状态，不再重复执行shown的代码
$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(); //$elem.show();和$elem.css执行顺序一前一后，但是执行非常快,可以认为同步执行，不存在过渡效果，讲它们异步执行setTimeout
// transition过渡时遇到没有效果，可以考虑是否异步问题
setTimeout(function() {
$elem.removeClass('fadeOut');
}, 20);
},
hide: function($elem) {
$elem.trigger('hide');
$elem.on('transitionend', function() { //transition结束有transitionend事件
// 绑定事件在触发事件之前
$elem.hide();
$elem.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.为什么我的盒子超出了400px?
2.css3淡入淡出时，显示有问题，点击多几次之后会突然消失？
var css3 = {
fade: {
show: function($elem) {
$elem.trigger('show');
$elem.on('transitionend', function() {
$elem.trigger('shown');
});
$elem.show(); //$elem.show();和$elem.css执行顺序一前一后，但是执行非常快,可以认为同步执行，不存在过渡效果，讲它们异步执行setTimeout
// transition过渡时遇到没有效果，可以考虑是否异步问题
setTimeout(function() {
$elem.removeClass('fadeOut');
}, 20);
},
hide: function($elem) {
$elem.trigger('hide');
$elem.on('transitionend', function() { //transition结束有transitionend事件
// 绑定事件在触发事件之前
$elem.hide();
$elem.trigger('hidden');
})
$elem.addClass('fadeOut');
}
},
css3的$elem.trigger('hidden');和$elem.trigger('shown');是有什么作用？
正在回答 回答被采纳积分+1
你好，代码中的问题：
1、因为box盒子设置了绝对定位脱离文档流，就不会继承body中的宽度了，会相对于窗口进行定位，box盒子宽度为100%，也就是窗口的宽度。可以给body设置相当定位，如下：
2、css3淡入淡出时，显示有问题，点击多几次之后会突然消失，这是因为之前的动画没有执行完毕。如果当前动画没有执行完毕，就执行另一个动画，那么之前的动画是不会停止的，会继续执行，直到结束，所以有的时候显示之后突然显示，就是之前消失的动画没有执行完毕。
在下一个小节中会讲到完善的方法：
可以继续往下面看。
3、$elem.trigger('hidden');和$elem.trigger('shown');是执行自定义的shown和hidden方法：
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星