如何用jQuery设置动画
JS和jQuery都可以设置动画,但是用jQuery来设置动画比JS的简单,因为jQuery大多数都是用插件来完成,让我们节省了很多代码,接下来用一个表格来简单分析一些jQuery常见的效果
分类 | 函数 | 描述 |
---|---|---|
基本 | hide() | 隐藏所显示的元素 |
show() | 显示所隐藏的元素 | |
toggle() | 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件 | |
滑动 | slideUp() | 通过高度的变化(向上缩小)来动态地隐藏所有匹配的元素,完成后可选地触发一个回调函数 |
slideDown() | 通过高度的变化(向下扩展)来动态地显示所有匹配的元素,完成后可选地触发一个回调函数 | |
slideToggle() | 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选 地触发一个回调函数 | |
淡入 淡出 | fadeOut() | 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完 成后可选地触发一个回调函数 |
fadeIn() | 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完 成后可选地触发一个回调函数 | |
fadeTo() | 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并 在动画完成后可选地触发一个回调函数 | |
fadeToggle() | 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在 动画完成后可选地触发一个回调函数 | |
自定 义 | stop() | 停止所有在指定元素上正在运行的动画 |
delay() | 设置一个延时来推迟执行队列中之后的项目 | |
animate() | 用于创建自定义动画的函数 |
animate支持的样式:(目前不支持颜色动画)
backgroundPositionX | backgroundPositionY | borderWidth |
---|---|---|
borderBottomWidth | borderLeftWidth | borderRightWidth |
borderTopWidth | borderSpacing | margin |
marginBottom | marginLeft | marginRight |
marginTop | outlineWidth | padding |
paddingBottom | paddingLeft | paddingRight |
paddingTop | height | width |
maxHeight | maxWidth | minHeight |
minWidth | fontSize | bottom |
left | right | top |
letterSpacing | wordSpacing | lineHeight |
textIndent |
注:此表格来自授课老师上课笔记的部分内容
看完表格后,你学会了吗?接下来实操一下吧!
第一步:设置自己想要的样式
设置一个盒子,在盒子里面加点文字来观看动画效果,设置十三个按钮,每个按钮都绑定一个点击事件,每种效果设置在按钮里,点击按钮即可观看动画效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>如何用jQuery设置动画</title>
</head>
<style>
#box{
width:200px;
height:200px;
color:white;
background: #E36062;
}
#box1{
position: fixed; /*固定定位*/
top:30%;
}
#btn1,#btn2,#btn3,#btn4,#btn5,#btn6,#btn7,#btn8,
#btn9,#btn10,#btn11,#btn12,#btn13{
width:110px;
height:50px;
background: #5B9BE7;
border:none; /*去掉边框*/
color:white; /*字体颜色*/
margin: 10px; /*上下左右为10个像素*/
}
</style>
<body>
<div id="box">字体移动放大</div>
<div id="box1">
<button id="btn1">隐藏 hide</button>
<button id="btn2">显示 show</button>
<button id="btn3">切换 toggle</button>
<br>
<button id="btn4">滑动隐藏 slideUp</button>
<button id="btn5">滑动显示 slideDown</button>
<button id="btn6">滑动切换 slideToggle</button>
<br>
<button id="btn7">淡出 fadeOut</button>
<button id="btn8">淡入 fadeIn</button>
<button id="btn9">淡入淡出切换 fadeToggle</button>
<br>
<button id="btn10">调整透明度到 0.2 fadeTo</button>
<button id="btn11">自定义动画</button>
<button id="btn12">停止</button>
<button id="btn13">delay</button>
</div>
</body>
</html>
效果图:
第二步:引入jQuery的插件,写jQuery的动画效果
1.基本的动画
第一种写法:有一个渐变的动画效果
<script src="jquery-1.12.4/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 1000是开始到结束的时间,即1s
// linear代表切换效果,意思是匀速,不写则默认为swing
$("#btn1").click(function(){
$("#box").hide(1000,'linear');
});
$("#btn2").click(function(){
$("#box").show(1000,'linear');
});
$("#btn3").click(function(){
$("#box").toggle(1000,'linear');
});
});
</script>
第二种写法:默认的效果
$("#btn1").click(function(){
$("#box").hide();
});
$("#btn2").click(function(){
$("#box").show();
});
$("#btn3").click(function(){
$("#box").toggle();
});
2.滑动
$("#btn4").click(function () {
$("#box").slideUp();
});
$("#btn5").click(function () {
$("#box").slideDown();
});
$("#btn6").click(function () {
$("#box").slideToggle();
});
3.淡入淡出
$("#btn7").click(function () {
//2000是开始到结束的执行时间,有个过渡效果
$("#box").fadeOut(2000);
});
$("#btn8").click(function () {
$("#box").fadeIn(2000);
});
$("#btn9").click(function () {
$("#box").fadeToggle(2000);
});
$("#btn10").click(function () {
//参数: 2000是执行的时间2s(可选),0.2是目标透明度
$("#box").fadeTo(2000, 0.2);
});
4.自定 义
$("#btn11").click(function () {
$("#box").animate({
"fontSize": "35px", /*执行过程中字体的变化*/
}, 1000);
});
$("#btn12").click(function () {
$("#box").stop();
});
$("#btn13").click(function () {
//delay设置延迟两秒执行匹配的元素
$("#box").delay(2000).fadeOut(2000);
});
其实要实现动画效果并没有我们想象中的难,让我们有一种不学不知道,一学吓一跳的感觉,所以相信自己也能做出很好看的效果,加油!
今天就分享到这里,如果有什么不懂或者想要询问的,欢迎留言哦,谢谢支持!