实例
<!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>jQuery动画效果练习</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
*{margin:0;padding: 0; }
.content{
margin: 20px;
font-size: 20px;
color: #fff;
float: left;
}
.content p{
height: 160px;
widows: 200px;
background: red;
text-align: center;
line-height: 160px;
position: relative;
}
.content button{
height: 40px;
width: 280px;
border: none;
}
#box{
width: 95px;
height: 40px;
border: none;
}
#text{
text-shadow: 3px 3px 3px #ff6500;
color: #fff;
font-size: 25px;
}
</style>
</head>
<body>
<div class="content">
<button class="btu1">1、点我隐藏</button>
<p class="box1">我是hide</p>
</div>
<div class="content">
<button class="btu2">2、点我显示</button>
<p class="box2">我是show</p>
</div>
<div class="content">
<button class="btu3">3、事件切换</button>
<p class="box3">我是toggle</p>
</div>
<div class="content">
<button class="btu4">4、淡入元素</button>
<p class="box4">我是fadeIn</p>
</div>
<div class="content">
<button class="btu5">5、淡出元素</button>
<p class="box5">我是fadeOut</p>
</div>
<div class="content">
<button class="btu6">6、淡出到指定值</button>
<p class="box6">我是fadeTo</p>
</div>
<div class="content">
<button class="btu7">7、下滑效果</button>
<p class="box7">我是slideDown</p>
</div>
<div class="content">
<button class="btu8">8、上滑效果</button>
<p class="box8">我是slideUp</p>
</div>
<div class="content">
<button class="btu9">9、动画效果</button>
<p class="box9">我是animate</p>
</div>
<div class="content">
<button class="btu10" id="box">10、动画效果</button> <button class="btu10-1" id="box">停止动画</button>
<p class="box10">我是animate</p>
</div>
<div class="content">
<button class="btu11">11、callback</button>
<p class="box11">我是callback</p>
</div>
<script>
$(function(){
$('.btu1').click(function(){
$('.box1').hide(1000);//1000代表1000毫秒,时间；
})
$('.box2').hide();
$('.btu2').click(function(){
$('.box2').show();
})
$('.btu3').click(function(){
$('.box3').toggle();
})
$('.box4').hide();
$('.btu4').click(function(){
$('.box4').fadeIn(3000);
})
$('.btu5').click(function(){
$('.box5').fadeOut(1000);
})
$('.btu6').click(function(){
$('.box6').fadeTo(1000,0.3);
})
$('.box7').hide();
$('.btu7').click(function(){
$('.box7').slideDown(1000);
})
$('.btu8').click(function(){
$('.box8').slideUp(1000);
})
$('.btu9').click(function(){
$('.box9').animate({fontSize:'10px'},1000);
})
$('.btu10').click(function(){
$('.box10').animate({
opacity:'0.3',
right:'600px',
width:'200px',
height:'200px',
lineHeight:'200px'
},3000);
})
$('.btu10-1').click(function(){
$('.box10').stop();
})
$('.btu11').click(function(){
$('.box11').hide(1000,function(){
$('body').css('background','#ff6500');
})
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例