jQuery中的动画
注意 :src里面记得更换线上地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 动画</title>
<script src="./jquery-3.4.1.min.js"></script>
<style>
.box {
width: 600px;
height: 600px;
background-color: red;
}
#box {
position: relative;
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">显示隐藏切换</button>
<button id="fadeIn">淡入</button>
<button id="fadeOut">淡出</button>
<button id="fadetoggle">淡入淡出切换</button>
<button id="slideDown">向下滑动</button>
<button id="slideUp">向上滑动</button>
<button id="slideToggle">向上向下滑动切换</button>
<button id="animate">动画动</button>
<button id="animateback">动画回</button>
<div class="box"></div>
<div id="box">123</div>
</body>
<script>
// 1、可以使用 hide() 和 show() 方法隐藏和显示HTML 元素
// hide() 隐藏
$('#hide').click(function () {
$('.box').hide(3000)
})
// show() 显示
$('#show').click(function () {
$('.box').show(3000)
})
// 隐藏 显示切换 toggle()
$('#toggle').click(function () {
$('.box').toggle(3000)
})
// 2、fadeIn() 用于淡入已隐藏的元素
// fadeOut() 方法用于淡出可见元素。
$('#fadeIn').click(function () {
$('.box').fadeOut(3000)
})
$('#fadeOut').click(function () {
$('.box').fadeIn(3000)
})
// fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
$('#fadetoggle').click(function () {
$('.box').fadeToggle(3000)
})
// 3、 slideDown() 方法用于向下滑动元素, slideUp() 方法用于向上滑动元素
$('#slideDown').click(function () {
$('.box').slideDown(1000)
})
$('#slideUp').click(function () {
$('.box').slideUp(1000)
})
// slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
$('#slideToggle').click(function () {
$('.box').slideToggle(3000)
})
// 4、animate({},时间) 方法用于创建自定义动画。不可以设置颜色属性,需要用到插件。
$('#animate').click(function () {
$('#box').animate({
left: '200px',
top: '100px',
width: '300px',
fontSize: '30px',
// backgroundColor: 'green',
// color: 'red',
rotate: '360deg',
}, 3000)
})
$('#animateback').click(function () {
$('#box').animate({
left: '0px',
top: '0px',
width: '100px',
fontSize: '30px',
rotate: '-360deg'
// backgroundColor: 'green',
// color: 'red'
}, 3000)
})
</script>
</html>