<!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(){
// show()第一个参数可以执行事件,动画执行结束之后做的事情
$('div').show(1000,function(){
alert('1');
});
})
$('button').eq(1).click(function(){
// hide()隐藏
$('div').hide(1000,function(){
console.log('2');
});
})
// slidedown() 滑动效果向下滑动
$('button').eq(2).click(function(){
$('div').slideDown(function(){
console.log('到底了吧');
});
})
// slidup() 滑动效果向上滑动
$('button').eq(3).click(function(){
$('div').slideUp(function(){
console.log('到顶了吧');
});
})
// fadeIn() 淡入
$('button').eq(4).click(function(){
$('div').fadeIn(1000,function(){
console.log('淡进来了吧');
});
})
// fadeOut() 淡出
$('button').eq(5).click(function(){
$('div').fadeOut(1000,function(){
console.log('淡出了吧');
});
})
// animate 自定义动画
// 第一个参数是对象 设置的样式 第二个参数是来设置动画时间
$('button').eq(6).click(function(){
$('div').animate({
width:'500px',
height:'500px',
borderRadius:'50%',
},1000)
})
</script>
</body>
</html>