为什么我这个代码没有动画效果
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body{
width: 500px;
margin: 100px auto;
}
*{
margin:0;
padding: 0;
}
.left{
width: 250px;
height: 50px;
background: green;
text-align: center;
border: none;
}
.right{
border:none;
width: 250px;
height: 50px;
text-align: center;
background: yellow;
}
.box{
display: none;
width: 500px;
height: 400px;
background-color: red;
}
.transtion{
transition: all .5s;
}
.fadeout{
visibility: hidden;
opacity: 0;
}
.slideup{
height: 0 !important;
padding: 0 !important;
}
.slideleft{
width: 0 !important;
padding: 0 !important;
}
</style>
</head>
<body>
<button type="button" class="left" name="button">left</button><button type="button" class="right" name="button">right</button>
<div class="box">
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
function init(ele,callback) {
if(ele.is(':hidden')){
ele.data('status','hidden')
if(callback === 'function'){
callback()
}
}else{
ele.data('status','shown')
}
}
function show(ele,callback) {
if(ele.data('status') === 'show') return;
if(ele.data('status') === 'shown') return;
ele.data('status','show').trigger('show')
callback()
}
function hide(ele,callback) {
if(ele.data('status') === 'hide') return;
if(ele.data('status') === 'hidden') return;
ele.data('status','hide').trigger('hide')
callback()
}
var js = {
slideleft:{
init:function (ele) {
var styles = {};
styles['width'] = ele.css('width');
styles['padding-left'] = ele.css('padding-left');
styles['padding-right'] = ele.css('padding-right');
ele.data('styles',styles)
ele.removeClass('transtion')
console.log(styles)
init(ele,function () {
ele.css({
'width':0,
'padding-left':0,
'padding-right':0,
})
console.log(ele.css('width'))
})
},
show:function (ele) {
show(ele,function () {
var styles = ele.data('styles')
ele.show()
ele.stop().animate({
'width':styles['width'],
'padding-left':styles['padding-left'],
'padding-right':styles['padding-right'],
},function () {
ele.data('status','shown').trigger('shown')
})
})
},
hide:function (ele) {
hide(ele,function () {
ele.stop().animate(function () {
// var styles = ele.data('styles')
// ele.show()
ele.css({
'width':0,
'padding-left':0,
'padding-right':0,
})
},function () {
ele.hide()
ele.data('status','hidden').trigger('hidden')
})
})
}
}}
var box = $('.box')
js.slideleft.init(box)
$('.left').on('click',function () {
js.slideleft.show(box)//,function() {
})
box.on('show shown hide hidden',function (e) {
console.log(e.type)
})
$('.right').on('click',function() {
js.slideleft.hide(box)
})
</script>
</body>
</html>
正在回答
animate要有一个动画过程，比如说宽度由0-500，不能使用show()显示来完成。所以你这样只能显示与隐藏，没有动画。参考：
自己测试下，祝学习愉快~~
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星