<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
background: orange;
display:none;
}
</style>
<script src="jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function() {
$(‘#bt1‘).on(‘click‘, function() {
$(‘p‘).toggle(1000);
})
$(‘#bt_fade_in‘).on(‘click‘,function(){
$(‘#div_fade_in‘).fadeIn(1000);
});
$(‘#bt_fade_out‘).on(‘click‘,function(){
$(‘#div_fade_in‘).fadeOut(1000);
});
$(‘#bt_fade_to‘).on(‘click‘,function(){
$(‘#div_fade_in‘).fadeTo(1000,.5);
});
});
</script>
</head>
<body>
<p>被隐藏对象</p>
<button id="bt1">隐藏</button>
<button id="bt_fade_in">fadeIn</button>
<button id="bt_fade_out">fadeOut</button>
<button id="bt_fade_to">fadeTo设置透明度</button>
<br/>
<div id="div_fade_in">FadeIn</div>
</body>
</html>
//除此之外还有slideDown, slideup, 每个动画都有一个执行完毕后的回调函数
时间： 2024-09-27 03:33:43