目录html
jQuery动画效果说明jquery
方法以下:框架
显示和隐藏动画ide
展开和收起动画动画
展开和收起动画方法spa
淡出和淡入动画code
淡出和淡入动画方法orm
自定义动画htm
在JS当中,为了实现动画效果咱们每每须要各类的声明,调用,循环,遍历,无所不用其极.每每敲完一个简单的效果,时间已通过了几十分钟甚至几个小时.而当你使用了jQuery库以后,代码量能够大大缩减,减小Coder敲代码的时间,而且保证功能的完美实现.
今天我简单的介绍一下使用jQuery库实现JS动画效果
在原生代码中,咱们常须要使用display来设置标签内容的显示与隐藏,而在jQuery中,咱们能够直接使用专门的方法实现效果.
<!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~
<!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方法。
其实就是改变了标签的透明度,并不修改其余属性
<!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和个人版本不一样,嘻嘻~,以前我吃过这个亏,因此提一下~