🙋 哈喽大家好,本次是jQuery案例练习系列第四期
⭐本期是jQuery动画——停止动画、淡入淡出、自定义动画
🏆系列专栏:前端案例练习
😄笔者还是前端的菜鸟,还请大家多多指教呀~
👍欢迎大佬指正,一起学习,一起加油!
停止动画
使用动画的过程中,如果在同一个元素上调用一个以上的动画方法,那么对这个元素来说,除了当前正在调用的动画,其他的动画将被放到效果队列中,这样就形成了动画队列。
动画队列
动画队列中所有动画都是按照顺序执行的,默认只有当前的一个动画执行完毕,才会执行后面的动画。为此,jQuery提供了stop()方法用于停止动画效果。通过此方法,可以让动画队列后面的动画提前执行。
stop()方法
stop()方法适用于所有的jQuery效果,包括元素的淡入淡出、自定义动画等。语法如下👇
$(selector).stop(stopAll,goToEnd);
stopAll:用于规定是否清除动画队列,默认是false;
goToEnd:用于规定是否立即完成当前的动画,默认是false。
stop()方法的常用方式
参数设置不同,作用也不同。
参数 | 作用 |
---|---|
$(“div”).stop(); | 停止当前动画,继续下一个动画 |
$(“div”).stop(true); | 清除div元素动画队列中的所有动画 |
$(“div”).stop(true,true); | 停止当前动画,清除动画队列中的所有动画 |
$(“div”).stop(false,true); | 停止当前动画,继续执行下一个动画 |
淡入淡出动画
淡入淡出方法
方法 | 说明 |
---|---|
fadeIn([speed],[easing],[fn]) | 淡入显示匹配元素 |
fadeOut([speed],[easing],[fn]) | 淡出隐藏匹配元素 |
fadeTo([speed],opacity,[easing],[fn]) | 以淡入淡出方式将匹配元素调整到指定的透明度 |
fadeToggle([speed],[easing],[fn]) | 在fadeIn()和fadeOut()两种效果之间切换 |
注意:fadeTo()方法的参数opacity表示透明度数值,范围在0~1之间,0代表完全透明,0.5代表50%透明,1代表完全不透明。
显示效果
淡入淡出
HTML
思路:
1、设置一个盒子(box)存放方块;
2、设置一组div方块放在盒子中。
<body>
<div class="box">
<div class="red"></div>
<div class="green"></div>
<div class="orange"></div>
<div class="blue"></div>
</div>
</body>
CSS
思路:
1、设置每一个方块的大小、浮动、间距;
2、设置盒子的大小、边距、边框;
3、 给每一个方块设置颜色;
<style>
/* 设置每一个方块的大小、浮动、间距 */
div {
width: 100px;
height: 100px;
float: left;
margin-left: 5px;
}
/* 设置盒子的大小、边距、边框 */
.box {
width: 425px;
height: 105px;
padding-top: 5px;
border: 1px solid #ccc;
}
/* 给每一个方块设置颜色 */
.red {
background-color: red;
}
.green {
background-color: green;
}
.orange {
background-color: orange;
}
.blue {
background-color: blue;
}
</style>
jQuery
思路:
1、引入jQuery库👇;
2、为所有颜色方块设置2秒完成半透明的淡入效果(fadeTo);
3、添加鼠标滑过的函数(hover);
4、为每一个方块设置动画效果,即当前元素(this)。当鼠标指针移入时,正常显示,鼠标指针移出时,设置成半透明的效果,效果如下👇
<script>
$(document).ready(function () {
$(".box div").fadeTo(2000, 0.2);
$(".box div").hover(
function () {
$(this).fadeTo(1, 1);
},
function () {
$(this).fadeTo(1, 0.2);
}
);
});
</script>
自定义动画
为了满足动画实现的灵活性,解决单个方法实现动画的单一性。jQuery中提供了animate()方法让用户可以自定义动画。
animate()语法
$(selector).animate(params[,speed][,easing][,fn]);
注意:
params表示想要更改的样式,以对象形式传递,样式名可以不用带引号,但如果样式名中有“-”(如:borde-left),需要用驼峰命名法(如borderLeft)。
代码演示
实现效果
自定义动画
代码及思路
思路:
1、定义按钮,定义div元素;
2、设置盒子的大小、颜色、绝对定位(position:absolute),绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的,默认是body;
3、给定义的按钮绑定点击事件;
4、设置动画,当单击鼠标时,div元素运动到距离左侧500px,距离顶部300px的位置,透明度为0.4,宽度为500px;
<!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>自定义动画</title>
<script src="./jquery-3.3.1.min.js"></script>
<style>
div {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
}
</style>
<script>
$(document).ready(function () {
$("button").click(function () {
$("div").animate(
{
left: 500,
top: 300,
opacity: 0.4,
width: 500,
},
500
);
});
});
</script>
</head>
<body>
<button>动起来</button>
<div></div>
</body>
</html>
总结
以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏,持续更新呢~
咱们下期再见~