凑个字数吧
为什么不能回复别人的。。。我想问下toggle，show\hide，slideUp\slideDown的区别，试了一下感觉没有特别大的区别@沉淀__
1 回答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
}
#a, #aa {
background-color: palegoldenrod;
}
#b, #bb {
background-color: palegreen;
}
#c, #cc {
background-color: paleturquoise;
}
#aa, #bb, #cc {
width: 50px;
height: 200px;
float: left;
}
#aaa {
clear: both;
width: 100px;
height: 100px;
background-color: gainsboro;
}
</style>
</head>
<body>
<button id="hidden">隐藏</button>
<button id="show">显示</button>
<button id="one">隐藏/显示</button>
<button id="fadein">淡入</button>
<button id="fadeout">淡出</button>
<button id="two">淡入/淡出</button>
<button id="three">特殊</button>
<button id="slideup">上滑</button>
<button id="slidedown">下滑</button>
<button id="slidetoggle">上滑/下滑</button>
<button id="custom1">自定义1</button>
<button id="custom2">自定义2</button>
<button id="custom3">自定义3</button>
<button id="stop1">停止动画1</button>
<button id="stop2">停止动画2</button>
<button id="stop3">停止动画3</button>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="aa"></div>
<div id="bb"></div>
<div id="cc"></div>
<div id="aaa">123</div>
<script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//显示和隐藏的动画 修改的是display+width +height
// 隐藏(动画时长/过程,函数)
$('#hidden').click(function () {
$('#a').hide();
//设置动画的过程:slow,normal,fast
$('#b').hide('slow');
//设置动画时长
$('#c').hide(6000, function () {
console.log("动画完成");
})
});
//显示
$('#show').click(function () {
$('#a').show();
$('#b').show('slow');
$('#c').show(1000);
});
//特殊(一个按钮控制隐藏和显示)
$('#one').click(function () {
$('#a').toggle();
$('#b').toggle('slow');
$('#c').toggle(1000);
});
//淡入淡出的动画 修改的是透明度opacity+display
//淡入
$('#fadein').click(function () {
$('#a').fadeIn();
$('#b').fadeIn('slow');
$('#c').fadeIn(1000);
});
//淡出
$('#fadeout').click(function () {
$('#a').fadeOut();
$('#b').fadeOut('slow');
$('#c').fadeOut(1000);
});
//淡入/淡出
$('#two').click(function () {
$('#a').fadeToggle();
$('#b').fadeToggle('slow');
$('#c').fadeToggle(1000);
});
//特殊,变化到指定的透明度
// fadeTo(时长/过程, 指定透明度, 函数)
$('#three').click(function () {
$('#a').fadeTo('slow', 0.7);
$('#b').fadeTo('slow', 0.1);
$('#c').fadeTo('slow', 0.5);
})
//滑动出现或隐藏动画, 修改display + height
//上滑
$('#slideup').click(function () {
$('#aa').slideUp(1000);
$('#bb').slideUp('slow');
$('#cc').slideUp();
})
//下滑
$('#slidedown').click(function () {
$('#aa').slideDown(1000);
$('#bb').slideDown('slow');
$('#cc').slideDown();
})
//上滑/下滑
$('#slidetoggle').click(function () {
$('#aa').slideToggle(1000);
$('#bb').slideToggle('slow');
$('#cc').slideToggle();
})
//自定义动画1 注:动画的属性应驼峰法书写,比如修改字体font-size的值,需要把属性名写成fontSize
$('#custom1').click(function () {
$('#aaa').animate({width:200,height:50,fontSize:100}, 1000);
});
//自定义动画2 相当于当前的增减值
$('#custom2').click(function () {
$('#aaa').animate({width:'+=50',height:'-=10'},'slow');
});
//自定义动画3,队列动画
$('#custom3').click(function () {
$('#aaa').animate({width:200},500);
$('#aaa').animate({height:200},500);
$('#aaa').animate({width:100},500);
$('#aaa').animate({height:100},500);
});
//停止动画
// stop(stopAll,goToEnd)
// stopAll:是否清除队列中的动画,默认false
// goToEnd:是否直接完成动画,默认false
$('#stop1').click(function () {
$('#aaa').stop(false,false);
});
$('#stop2').click(function () {
$('#aaa').stop(true,false);
});
$('#stop3').click(function () {
$('#aaa').stop(true,true);
});
</script>
</body>
</html>举报
0/150
提交
取消
