目录
jQuery动画效果说明
在JS当中,为了实现动画效果我们往往需要各种的声明,调用,循环,遍历,无所不用其极.往往敲完一个简单的效果,时间已经过了几十分钟甚至几个小时.而当你使用了jQuery库之后,代码量可以大大缩减,减少Coder敲代码的时间,并且保证功能的完美实现.
今天我简单的介绍一下使用jQuery库实现JS动画效果
方法如下:
- 显示和隐藏
- 展开和收起
- 淡入和淡出
- 自定义动画
显示和隐藏动画
在原生代码中,我们常需要使用display来设置标签内容的显示与隐藏,而在jQuery中,我们可以直接使用专门的方法实现效果.
显示和隐藏动画方法
- show();控制让标签显示的动画方法
- hide();控制让标签隐藏的动画方法
- toggle();控制让标签显示|隐藏效果切换的动画方法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 200px;
background: red;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div>div1</div>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<script>
$(function () {
//........
//显示和隐藏动画:本质就是操作标签的样式(宽度 | 高度 | 透明度)
//jQ.show([speed],[fn]);
//jQ.hide([speed],[fn]);
//jQ.toggle([speed],[fn]);
$("button:eq(0)").click(function () {
//第一个参数:动画执行的时间(速度) 单位是毫秒 1s = 1000ms
//第二个参数:回调函数(当动画执行完毕的时候调用)
//fast 0.2
//slow 0.6
$("div").show("fast",function () {
console.log("动画--end");
});
})
$("button:eq(1)").click(function () {
//第一个参数:动画执行的时间(速度)
//第二个参数:回调函数(当动画执行完毕的时候调用)
$("div").hide("slow",function () {
console.log("动画--end");
});
});
$("button:eq(2)").click(function () {
//第一个参数:动画执行的时间(速度)
//第二个参数:回调函数(当动画执行完毕的时候调用)
$("div").toggle(1000,function () {
console.log("动画--end");
});
})
})
</script>
</body>
</html>
显示和隐藏动画语法
$(' div ').show(speed,callBack)
$(' div ').hide(speed,callBack)
其中speed为可选参数,代表着执行动画速度,单位为毫秒
可用系统默认值:“slow”、“normal”、“fast”,对应的速度分别为0.6秒、0.4秒和0.2秒。
callBack为可选参数,代表着动画执行完之后的回调函数.
$(' div ').toggle()
不传递参数,切换当前元素(标签)的可见状态,如果当前元素的状态为不可见,则切换为可见,如果当前元素的状态为可见,则切换为不可见。
$(' div ').toggle(speed,callBack)
第一个可选的参数为动画执行的速度,第二个可选的参数为动画执行完后执行的回调函数。
show和hide的实现逻辑为同时改变标签的width,height,以及opacity.
展开和收起动画
展开和收起动画,在显示和隐藏的基础上增加了动画的滑动效果,这显然看起来更coolllllll~
展开和收起动画方法
- slideDown
- slideUp
- slideToggle
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div{
width: 50px;
height: 300px;
background-color: #f52;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div>1</div><br>
<div>2</div>
<button>展开</button>
<button>收起</button>
<button>切换</button>
<script>
$(function () {
//........
//展开和收起动画:设置标签的高度
//jQ.slideDown([speed],[fn]);
//jQ.slideUp([speed],[fn]);
//jQ.slideToggle([speed],[fn]);
$("button").first().click(function () {
$("div").slideDown(1000,function () {
console.log("--end--");
})
})
$("button").eq(1).click(function () {
$("div").slideUp(1000,function () {
console.log("--end--");
})
})
$("button").last().click(function () {
$("div").slideToggle(3000,function () {
console.log("--end--");
})
})
})
</script>
</body>
</html>
展开和收起动画语法
slideDown(speed,callBack)
slideUp(speed,callBack)
slideToggle(speed,callBack)
无论是展开还是收起,它们改变的仅仅只是标签的高度
slideToggle
当当前标签高度不为0时,将高度改为0,实现收起效果,如果为0,则实现展开效果.
三种语法的参数,第一个参数:动画执行的时间,同show方法。
第二个参数:动画执行完毕的回调函数,可以省略,同show方法。
淡出和淡入动画
其实就是改变了标签的透明度,并不修改其他属性
淡出和淡入动画方法
- fadeIn
- fadeOut
- fadeToggle
- fadeTo
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div>div</div>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出到.</button>
<button>切换</button>
<script>
$(function () {
//........
//淡入淡出动画:设置标签的透明度(opacity)
//jQ.fadeIn([speed],[fn]);
//jQ.fadeOut([speed],[fn]);
//jQ.fadeToggle([speed],[fn]);
//jQ.fadeTo(speed,target,fn)
$("button:eq(0)").click(function () {
$("div").fadeIn(1000,function () {
console.log("---end---");
})
})
$("button:eq(1)").click(function () {
$("div").fadeOut(3000,function () {
console.log("---end---");
})
})
$("button:eq(2)").click(function () {
$("div").fadeTo(1000,0.5,function () {
console.log("---end---");
})
})
$("button:eq(3)").click(function () {
$("div").fadeToggle(1000,function () {
console.log("---end---");
})
})
})
</script>
</body>
</html>
淡入和淡出动画语法
fadeIn(speed,callBack);
fadeOut(speed,callBack)
fadeToggle(speed,callBack)
fadeTo(speed,opactity,callBack)
fadeIn()方法
的作用是淡入动画,即改变标签的透明度让标签慢慢的显示出来。
fadeOut()方法
的作用是淡出动画,即改变标签的透明度让标签慢慢的消失(透明度为0)。
fadeToggle()方法
的作用是切换动画,如果当前标签的透明度不为0,那么就执行淡出动画,否则就执行淡入动画。
fadeTo()方法
的作用是淡入到,即使用动画效果实现将标签的透明度设置为指定的值。
透明度(opacity)的取值为:0.0~1.0
自定义动画
自定义动画为jQuery库里已经封装好的控制宽高,透明度等相关功能的方法,jQuery为我们专门提供了一个animate()方法,以供我们自定义其动画效果.
自定义动画效果语法
animate(styles,speed,easing,callback)
其中
style为规定产生动画效果的 CSS 样式和值。
speed为速度,设定与show相同
easing为可选。规定在不同的动画点中设置动画速度的 easing 函数。
内置的 easing 函数:
swing
linear
callBack为回调函数,这个你们都懂啦,就不再叙述了.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div>div</div>
<button>执行动画1</button>
<button>执行动画2</button>
<button>执行动画3</button>
<button>执行动画4</button>
<script>
$(function () {
//........
//jQuery框架提供自定义动画方法:animate
//语法:jQ.animate({},speed,fn)
$("button").eq(0).click(function () {
$("div").animate({
width:"300px",
height:"240px",
background:'blue'
},1000,function () {
console.log("---end--");
})
})
$("button").eq(1).click(function () {
$("div").animate({
width:"+=50px",
height:"+=50px"
},500,function () {
console.log("---end--");
})
})
$("button").eq(2).click(function () {
$("div").animate({
width:"500px",
height:"toggle"
},500,function () {
console.log("---end--");
})
})
$('button:eq(3)').click(function () {
$('div').animate({
width:'888px',
height:'toggle'
},500)
})
})
</script>
</body>
</html>
对了,最后,如果你们拿案例代码去实现发现无效的时候,可以去看下是不是自己的jQuery和我的版本不同,嘻嘻~,之前我吃过这个亏,所以提一下~