实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.jQuery动画事件-2019年01月24日</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="content">
<button class="btn1">点击隐藏</button>
<p class="box1">~ 我是hide() ~</p>
</div>
<div class="content">
<button class="btn2">点击显示</button>
<p class="box2">~ 我是show() ~</p>
</div>
<div class="content">
<button class="btn3">隐藏\显示</button>
<p class="box3">~ 我是toggle() ~</p>
</div>
<div class="content">
<button class="btn4">淡入元素</button>
<p class="box4">~ 我是fadeIn() ~</p>
</div>
<div class="content">
<button class="btn5">淡出元素</button>
<p class="box5">~ 我是fadeOut() ~</p>
</div>
<div class="content">
<button class="btn5-1">淡入\淡出</button>
<p class="box5-1">~ 我是fadeToggle() ~</p>
</div>
<div class="content">
<button class="btn6">下滑效果</button>
<p class="box6">~ 我是slideDown() ~</p>
</div>
<div class="content">
<button class="btn7">上滑效果</button>
<p class="box7">~ 我是slideUp() ~</p>
</div>
<div class="content">
<button class="btn7-1">上滑\下滑</button>
<p class="box7-1">~ 我是slideToggle() ~</p>
</div>
<div class="content">
<button class="btn8">动画效果</button>
<p class="box8">~ 我是animate() ~</p>
</div>
<div class="content">
<button class="btn9" id="box">开始动画</button> <button class="btn10" id="box">停止动画</button>
<p class="box9">~ 我是animate() ~</p>
</div>
<div class="content">
<button class="btn11">callBack</button>
<p class="box11">~ 我是callback() ~</p>
</div>
</body>
</html>
<script>
// 1.hide(speed,callback) 隐藏元素
$('.btn1').click(function(){
$('.box1').hide(1000,function(){
$('.btn1').hide();
});
});
// 2.show(speed,callback) 显示元素
$('.box2').hide();
$('.btn2').click(function(){
$('.box2').show(100);
});
// 3.toggle(speed,callback) 显示和隐藏元素
$('.btn3').click(function(){
$('.box3').toggle(100);
});
// 4.fadeIn(speed,callback) 淡入元素
$('.box4').hide();
$('.btn4').click(function(){
$('.box4').fadeIn(900);
});
// 5.fadeOut(speed,callback) 淡出元素
$('.btn5').click(function(){
$('.box5').fadeOut(1000);
});
// 6.fadeToggle(speed,callback) 淡出\淡入
$('.btn5-1').click(function(){
$('.box5-1').fadeToggle(1000,function(){
$('.box5-1').css('background','blue');
});
});
// 7.slideDown(speed,callback) 向下滑动元素,它可以取以下值："slow"、"fast" 或毫秒
$('.box6').hide();
$('.btn6').click(function(){
$('.box6').slideDown('slow');
});
// 7.slideUp(speed,callback) 向上滑动元素,它可以取以下值："slow"、"fast" 或毫秒
$('.btn7').click(function(){
$('.box7').slideUp('fast');
});
// 8.slideToggle(speed,callback) 上下滑动元素,它可以取以下值："slow"、"fast" 或毫秒
$('.btn7-1').click(function(){
$('.box7-1').slideToggle(1000);
});
/*
9.animate({params},speed,callback) 动画效果
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
*/
$('.btn8').click(function(){
$('.box8').animate({fontSize:'25px'},1500,function(){
$('.box8').css({'color':'yellow','background':'green'});
});
});
$('.btn9').click(function(){
$('.box9').animate({
opacity: '0.3',
top: '200px',
width: '80px',
height: '80px',
lineHeight: '80px',
borderRadius: '50%',
},2000);
});
$('.btn10').click(function(){
$('.box9').stop();
});
$('.box11').hide();
$('.btn11').click(function(){
$('.box11').show(2000,function(){
$('.box11').animate({fontSize:'12px',borderRadius:'50%'},'slow',function(){
$('body').css('background','#05f5e5');
});
});
});
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS:
*{margin: 0; padding: 0;}
.content{
margin: 20px;
font-size: 20px;
color: #fff;
float: left;
}
.content p{
width: 200px; height: 160px;
background: red;
text-align: center; line-height: 160px;
position: relative;
}
.content button{
width: 200px; height: 40px;
border: none;
}
#box{
width: 95px; height: 40px;
border: 0;
}
