2.03.24 jQuery的动画函数
1.jQuery的动画函数
- jq对象.show()
- jq对象.hide()
- jq对象.toggle()
<style>
button {
padding: 5px 20px;
}
.box {
width: 150px;
height: 110px;
background-color: red;
}
</style>
<button class="btn-1">显示</button>
<button class="btn-2">隐藏</button>
<button class="btn-3">切换</button>
<div class="box"></div>
<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>
// 改变元素的宽度和高度和透明度
// $(".box").hide();// 隐藏元素
// $(".box").show();//显示元素
// $(".box").toggle();//切换显示和隐藏
// 参数:
// 毫秒、"fast"、"slow"
// 演示
$(".btn-1").click(function(){
// 添加时间毫秒值 就可以执行动画
$(".box").show(500)
});
$(".btn-2").click(function(){
// 添加时间毫秒值 就可以执行动画
$(".box").hide(500)
});
$(".btn-3").click(function(){
// 添加时间毫秒值 就可以执行动画
$(".box").toggle()
});
</script>
- jq对象.fadeIn()
- jq对象.fadeOut()
- jq对象.fadeToggle()
<style>
button {
padding: 5px 20px;
}
.box {
width: 150px;
height: 110px;
background-color: red;
}
</style>
<button class="btn-1">显示</button>
<button class="btn-2">隐藏</button>
<button class="btn-3">切换</button>
<div class="box"></div>
<script src='./jquery/jquery-3.6.0.min.js'></script>
<script>
// 改变元素的透亮度
// $(".box").fadeOut();// 淡出
// $(".box").fadeIn();//淡入
// $(".box").fadeToggle();//切换淡入和淡出
// 参数:
// 毫秒、"fast"、"slow"
// 演示
$(".btn-1").click(function(){//显示
// 添加时间毫秒值 就可以执行动画
$(".box").fadeIn(1500)
})
$(".btn-2").click(function(){
// 添加时间毫秒值 就可以执行动画
$(".box").fadeOut(1500)
})
$(".btn-3").click(function(){
// 添加时间毫秒值 就可以执行动画
$(".box").fadeToggle(1500)
})
</script>
- jq对象.slideDown()
- jq对象.slideUp()
- jq对象.slideToggle()
<style>
button {
padding: 5px 20px;
}
.box {
width: 150px;
height: 110px;
background-color: red;
}
</style>
<button class="btn-1">显示</button>
<button class="btn-2">隐藏</button>
<button class="btn-3">切换</button>
<div class="box"></div>
<script src='./jquery/jquery-3.6.0.min.js'></script>
<script>
// 主要改变元素的高度
// $(".box").slideDown();// 下拉显示
// $(".box").slideUp();// 收起隐藏
// $(".box").slideToggle();//切换淡入和淡出
// 参数:
// 毫秒、"fast"、"slow"
// 演示
$(".btn-1").click(function(){//显示
// 添加时间毫秒值 就可以执行动画
$(".box").slideDown(1500)
})
$(".btn-2").click(function(){
// 添加时间毫秒值 就可以执行动画
$(".box").slideUp(1500)
})
$(".btn-3").click(function(){
// 添加时间毫秒值 就可以执行动画
$(".box").slideToggle(1500)
})
- jq对象.animate()
<style>
button {
padding: 10px 20px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<button class="btn-1">执行动画(显示)</button>
<button class="btn-2">执行动画(隐藏)</button>
<div class="box"></div>
<script src="./jquery/jquery-3.6.0.js"></script>
<script>
$(".btn-1").click(function () {
// 执行动画
// 参数1: css属性对象
// 参数2: 完成动画所需的毫秒值
// 参数3:回调函数(可选)
$(".box").animate(
{
width: 300,
height: 200
},
1000,
function () {
console.log("完成动画,执行回调函数1")
})
})
$(".btn-2").click(function () {
// 执行动画
// 参数1: css属性对象
// 参数2: 完成动画所需的毫秒值
// 参数3:回调函数(可选)
$(".box").animate(
{
width: 0,
height: 0
},
1000,
function () {
console.log("完成动画,执行回调函数2")
})
})
</script>
- jq对象.stop()
- stop函数有停止动画的功能,停止当前jq对象的animate()动画函数
- 比如:下面例子中,一段时间里快速频繁地鼠标进出一级菜单容器后,鼠标静止,会看到动画还在持续运动一段时间
<style>
body {
margin: 0;
}
ul , ol {
padding: 0;
margin: 0;
list-style: none;
}
.container {
width: 1200px;
margin: 0 auto;
}
.my-header {
height: 100px;
border-bottom: 3px solid #000;
}
.my-header ul {
height: 100px;
}
.my-header ul > li {
width: 120px;
float: left;
margin: 30px 30px;
}
.my-header-title {
height: 40px;
line-height: 40px;
text-align: center;
background-color: skyblue;
cursor: pointer;
font-weight: bold;
}
.my-header-content {
width: 140px;
display: none;
background-color: #f0f0f0;
}
.my-header-content li {
padding-left: 20px;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
background-color: #f0f0f0;
}
.my-header-content li:hover {
background-color: skyblue;
color: #fff;
}
</style>
<header class="my-header">
<div class="container">
<ul class="menu-box">
<li>
<div class="my-header-title">一级菜单</div>
<ol class="my-header-content">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ol>
</li>
</div>
</header>
<script src='../../jq/jquery-3.6.0.min.js'></script>
<script>
// 需求:
// 制作动画的下拉菜单
// 编码:
// 获取元素,绑定事件(鼠标移入)
$(".menu-box").on('mouseenter','.my-header-title',function(){
// 显示当前标签的下一个元素
$(this).next(".my-header-content").slideDown(500);
console.log("mouseenter");
})
// 获取元素,绑定事件(鼠标移出)
$(".container").on('mouseleave','.menu-box > li ',function(){
// 寻找当前标签的后代元素
$(this).find(".my-header-content").slideUp(500);
console.log("mouseleave");
})
// .stop() 停止动画的作用
/*
// 获取元素,绑定事件(鼠标移入)
$(".menu-box").on('mouseenter','.my-header-title',function(){
// 显示当前标签的下一个元素
$(this).next(".my-header-content").stop().slideDown(500);
console.log("mouseenter");
})
// 获取元素,绑定事件(鼠标移出)
$(".container").on('mouseleave','.menu-box > li ',function(){
// 寻找当前标签的后代元素
$(this).find(".my-header-content").stop().slideUp(500);
console.log("mouseleave");
})
*/
</script>
- 给上面代码加了stop()函数就不会有这种情况
- 原因:回归原生的JS可知,动画是因为有延迟函数才会产生效果,没有stop()的情况下频繁触发动画,使得不断产生延迟函数,所以,才会在鼠标静止下来了,动画还在动的情况,加了stop()后,停止了动画,清除了延迟函数,就使得效果更为正常。