css部分
引入jQuery
<script src="./js/jquery-3.4.1.min.js"></script>
<style>
#box {
width: 400px;
height: 400px;
background-color: red;
}
#move {
position: relative;
width: 100px;
height: 100px;
background-color: green;
}
</style>
html部分
按钮以及盒子
<div id="box"></div>
<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="stop">暂停</button>
<div id="moveBox"></div>
方法
方法 | 功能 |
---|---|
hide() | 隐藏 |
show() | 显示 |
toggle() | 切换 hide() 和 show() 方法 |
fadeIn() | 用于淡入已隐藏的元素 |
fadeOut() | 用于淡出可见元素 |
fadeToggle() | 在 fadeIn() 与 fadeOut() 方法之间进行切换 |
slideDown() | 用于向下滑动元素 |
slideUp() | 用于向上滑动元素 |
slideToggle() | 在 slideDown() 与 slideUp() 方法之间进行切换 |
animate() | 用于创建自定义动画。 不可以改变颜色 需要插件 |
jQuery stop() | 用于停止动画或效果 |
回调函数 | 在当前动画 100% 完成之后执行。 |
js部分
// hide() 和 show() 方法来隐藏和显示
$("#hide").click(function () {
$("#box").hide();
});
$("#show").click(function () {
$("#box").show();
});
// 可以使用 toggle() 方法来切换
$("#toggle").click(function () {
$("#box").toggle();
});
// 2、fadeIn() 用于淡入已隐藏的元素, fadeOut() 方法用于淡出可见元素。
$("#fadeIn").click(function () {
$("#box").fadeIn(2000);
});
$("#fadeOut").click(function () {
$("#box").fadeOut(2000);
});
// fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
$("#fadeToggle").click(function () {
$("#box").fadeToggle(2000);
});
// 3、 slideDown() 方法用于向下滑动元素, slideUp() 方法用于向上滑动元素。
$('#slideDown').click(function() {
$('#box').slideDown(3000)
})
$('#slideUp').click(function () {
$('#box').slideUp(3000)
})
// slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
$('#slideToggle').click(function () {
$('#box').slideToggle(3000)
})
// 4、animate() 方法用于创建自定义动画
// 不能改变颜色
// 回调函数 在当前动画 100% 完成之后执行。
$('#animate').click(function() {
$('#moveBox').animate({
left:'300px',
width : '200px'
},3000,function() {
alert('移动完成')
})
})
// jQuery stop() 方法用于停止动画或效果
$('#stop').click(function() {
$('#moveBox').stop()
})