说起jQuery，大家应该都了解一些，至少都听过，但是jQuery到底是什么呢？
jQuery其实是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。
那么，了解jQuery之后，接下来我就介绍一下jQuery的特效函数
1、hover(funcOver, funcOut);
学过H5的都知道，在css里有一个hover，它的功能是添加移入移出特效的，那么jQuery也有一个hover，它的功能也是添加移入移出特效的。
而jQuery的hover有两个参数，其中funcOver是添加鼠标移入特效，funcOut是添加鼠标移出特效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: orange;
}
</style>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
$("#div1").hover(function(){
$(this).css("backgroundColor", 'red');
}, function(){
$(this).css("backgroundColor", 'blue');
})
})
</script>
</head>
<body>
<div id = 'div1'></div>
</body>
</html>
运行结果：鼠标未移入时，div1是橙色，鼠标移入时，div1变为红色，鼠标移出时，div1变为蓝色，
2、从左上角收起和展开的特效
show() 显示
hide() 隐藏
show()和hide()各有两个参数：
第一个参数：毫秒数，动画持续的时候
第二个参数：回调函数，动画结束的时候执行的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: orange;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
$("#div1").hover(function(){
$("#div2").hide(2000, function(){
$("#div1").html("移入完成");
})
}, function(){
$("#div2").show(2000, function(){
$("#div1").html("移出完成");
})
})
})
</script>
</head>
<body>
<div id = 'div1'></div>
<div id = 'div2'></div>
</body>
</html>
运行结果：当鼠标移入橙色区域时，蓝色区域会向左上角收缩并消失，过程为2秒，当鼠标移出橙色区域时，蓝色区域会从左上角再次出现，过程也为2秒。
3、透明度的淡入淡出效果
fadeIn() 设置淡出效果
fadeOut() 设置淡入效果
fadeIn()和fadeOut()各有两个参数：
第一个参数：毫秒数，动画持续的时候
第二个参数：回调函数，动画结束的时候执行的
fadeTo() 设置具体的淡入淡出值
fadeTo()相比fadeIn()和fadeOut()参数发生了变化：
第一个参数：毫秒数，动画持续的时候
第二个参数：透明度的数值 只能传入0~1的小数
第三个参数：回调函数，动画结束的时候执行的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: orange;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
$("#div1").hover(function(){
$("#div2").fadeOut(2000, function(){
$("#div1").html("移入完成");
})
}, function(){
$("#div2").fadeIn(2000, function(){
$("#div1").html("移出完成");
})
})
})
</script>
</head>
<body>
<div id = 'div1'></div>
<div id = 'div2'></div>
</body>
</html>
运行结果：当鼠标移入橙色区域时，蓝色区域妈慢慢消失，过程为2秒，当鼠标移出橙色区域时，蓝色区域会慢慢出现，过程也为2秒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: orange;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
$("#div1").hover(function(){
$("#div2").fadeTo(2000, 0.5, function(){
$("#div1").html("移入完成");
})
}, function(){
$("#div2").fadeTo(2000, 1, function(){
$("#div1").html("移出完成");
})
})
})
</script>
</head>
<body>
<div id = 'div1'></div>
<div id = 'div2'></div>
</body>
</html>
运行结果：当鼠标移入橙色区域时，蓝色区域的透明度变为原来的50%，过程为2秒，当鼠标移出橙色区域时，蓝色区域的透明度变为原来的100%，过程也为2秒。
4、卷闸效果
slideDown() 向上收缩
slideUp() 向下恢复
slideDown()和slideUp()各有两个参数：
第一个参数：毫秒数，动画持续的时候
第二个参数：回调函数，动画结束的时候执行的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: orange;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
$("#div1").hover(function(){
$("#div2").slideUp(2000, function(){
$("#div1").html("移入完成");
})
}, function(){
$("#div2").slideDown(2000, function(){
$("#div1").html("移出完成");
})
})
})
</script>
</head>
<body>
<div id = 'div1'></div>
<div id = 'div2'></div>
</body>
</html>
运行结果：当鼠标移入橙色区域时，蓝色区域会向上收缩并消失，过程为2秒，当鼠标移出橙色区域时，蓝色区域会向下再次出现，过程也为2秒。
5、animate方法
animate方法有4个参数：
第一个参数：变化的css样式和目的值
第二个参数：动画持续的时间
第三个参数：运动形态 支持两种运动形态
匀速(linear) 慢块慢（默认）(swing)
第四个参数：回调函数
$("#div1").click(function(){
$("#div1").animate({
width: 400,
height: 400
}, 4000, "linear", function(){
$("#div1").html("移入完成");
}));
$("#div2").animate({
width: 400,
height: 400
}, 4000, "swing", function(){
$("#div1").html("移出完成");
}))
})
【注】在JQ中实现链式运动，只需要在animate方法后面通过链式操作再跟animate方法就行了
这里注意，虽然animate方法好用，但是如果不断地鼠标移入移且鼠标移入移出速度大于动画的执行速度的话，浏览器会将鼠标的这些移入移出全部记住，几遍鼠标停下来，动画也不会停下，而是把之前没完成的移入移出执行完才会停下，所以我们每次调用animate的方法之前，要将上一次动画停一下。
下面介绍一下如何停下当前动画：
stop():停止当前动画，但后续动画执行不受影响
stop(true):停止所有动画，包括后续动画的执行
stop(true,true):停止当前动画，并将当前动画直接达到目的值
finish():停止所有动画，并将所有动画直接达到目的值
delay(毫秒数):延迟动画执行
$("#div1").click(function(){
$("#div2").animate({width: 400}, 2000)
.delay(4000)
.animate({height: 400}, 2000)
.animate({opacity: 0.5}, 2000)
})
$("#div2").click(function(){
$("#div2").stop(); //停止当前运动的动画，但是后续动画执行不受影响
$("#div2").stop(true); //停止所有动画，包括后续的动画
$("#div2").stop(true, true); //停止所有动画，并且将当前的动画直接到达目的值
$("#div2").finish(); //停止所有的动画，并且将所有动画到达目的值
})
OK，这次就先写这些，如果觉得对你有帮助的话，可以点个赞，支持一下我这个新人博主呀，
如果有什么不足或错误也欢迎大家指出。
最后给大家推荐一位B站UP主——码农雨飞，是一位技术大神，发在B站的H5教学视频非常不错，很适合刚刚接触H5的小白学习，关于H5，js方面不懂得都可以去看一下他的视频，相信会对大家会有很多帮助。
扫一扫
2057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
