<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<script src="./jquery-1.8.3.js"></script>
<style>
div{
width: 300px;
height: 300px;
background: pink;
display: none;
}
</style>
</head>
<body>
<button>show(显示)</button>
<button>hide(隐藏)</button>
<button>slidedown(向下滑动)</button>
<button>slidup(向上滑动)</button>
<button>fadeIn(淡入)</button>
<button>fadeOut(淡出)</button>
<button>animate自动动画</button>
<div></div>
<script>
// 显示
$('button').eq(0).click(function(){
// The first parameter of show() can execute events, what to do after the animation execution ends
$('div').show(1000,function(){
alert('1');
});
})
$(' button').eq(1).click(function(){
// hide() hides
$('div').hide(1000,function(){
console.log('2');
});
})
// slidedown() The sliding effect slides down
$('button').eq(2).click(function(){
$('div').slideDown(function(){
console.log('It's the end' );
});
})
// slideUp() sliding effect slides up
$('button').eq(3).click(function(){
$('div').slideUp(function(){
console.log ('It's on top');
});
})
// fadeIn() fade in
$('button').eq(4).click(function(){
$('div').fadeIn(1000,function( ){
console.log('Fade in');
});
})
// fadeOut() fades out
$('button').eq(5).click(function(){
$('div'). fadeOut(1000,function(){
console.log('Fade out');
});
})
// animate custom animation
// The first parameter is the style set by the object The second parameter is to set the animation time
$('button').eq(6).click(function(){
$('div') .animate({
width:'500px',
height:'500px',
borderRadius:'50%',
},1000)
})
</script>
</body>
</html>