使用bootstrap是简化了静态的布局，而使用jQuery是简化了动态的效果，能够用简单的函数来实现一些动态效果，这一节记录一下一些基本的jQuery效果。
隐藏与显示
最基本的效果，让元素隐藏或者显示，这个效果直接使用jsp也不难实现，采用jQuery的代码如下：
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
当点击对应的按钮时就可以隐藏或者显示，这个函数有两个可选参数，一个是时间，即多长时间内完成隐藏或者显示，另一个是回调函数，即执行完之后调用哪个函数。时间默认是0，这种情况下效果表现为直接消失或者直接出现。
当然，如果想让一个按钮同时兼任隐藏与显示两个功能，就可以利用toggle（）。通过 jQuery，可以使用 toggle()方法来切换hide()和show()方法。显示被隐藏的元素，并隐藏已显示的元素：
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
这种方式在后面成对出现的效果里也有，也有两个参数，和前面一样也是时间和回调函数，用法没区别。
淡入淡出
这是ppt里面常用的效果，jQuery里面使用下面四种函数实现这个效果：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
从名字就可以看出，前两个对应淡入和淡出，第三个和前面隐藏显示一样，也是切换功能的函数，而第四个fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。其实这里的淡入淡出效果很像是上一个显示隐藏设置上执行时间之后的效果。前三个方法都有两个可选参数：执行速度和回调函数，执行速度可以使用以毫秒为单位的数字，也可以用字符串直接使用已经设定好的速度。
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
而对于fadeTo，还增加了一个透明度的参数，这个参数取值范围在0-1之间，用于表示渐变到多少的透明度。
滑动
利用下面三个方法来实现滑动：
slideDown()
slideUp()
slideToggle()
效果上这三个函数实现了点击然后展开一个元素，其实效果上还是和前面设置了时间的消失隐藏很像，只不过这个是在全部显示的情况下展开的。使用起来没什么难度，只有两个可选参数：速度和回调函数。
动画
这是入门基本效果里面很关键的一个效果。jQuery animate() 方法允许创建自定义的动画。其语法如下：
比如说下面这段代码：
$("button").click(function(){
$("div").animate({
left:'250px'});
});
当点击按钮时，图层的左边距就会从0变成250px，表现为整个图层向右移动，而且是一个动态变化的效果。可以根据自己的需要，对css进行不同的动态变化，这些动态变化都放在中括号里面，用css名称：‘修改值’的格式来表示。如果需要一次修改几个值，可以用逗号将这些值隔开。
此外当使用animate()时，必须使用Camel标记法书写所有的属性名，比如，必须使用paddingLeft而不是padding-left，使用marginRight而不是margin-right，等等。
jQuery 提供针对动画的队列功能。就是说可以对一个对象编写多个animate()调用，jQuery会创建包含这些方法调用的“内部”队列。然后逐一运行这些animate调用。效果上表现为做完一个做另一个，但是必须是对同一个对象。示例代码如下：
$("button").click(function(){
var div=$("div");
div.animate({
height:'300px',opacity:'0.4'},"slow");
div.animate({
width:'300px',opacity:'0.8'},"slow");
div.animate({
height:'100px',opacity:'0.4'},"slow");
div.animate({
width:'100px',opacity:'0.8'},"slow");
});
停止
jQuery可以利用停止来暂停动画，具体语法如下：
当两个可选参数都设置为true的时候，点击暂停会让动画直接完成，否则会处在暂停状态，再次发生事件会继续执行动画。
回调函数与链
前面的效果中基本都有回调函数这个可选参数，经过百度地图接口的摸索，基本也能搞清楚什么是回调函数。对于jQuery，回调函数就是动画执行到100%后再执行的函数，如果不使用回调函数，会在效果上表现为同时进行，而使用回调函数就可以实现执行完一个再执行另一个，但是需要是一个函数，函数需要实现：
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
链是一种简单写法，对于同一个对象，如果需要对其实现好几个效果，可以直接使用链，即在一条语句中允许多个jQuery方法（在相同的元素上），比如说下面这种：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
这样会从左到右执行，上面的代码效果为先变红，在向上滑动之后向下滑动。其实就是前面先获取对象再套用动画的简便写法。
小总结
基本函数并不难，重要的是活学活用，下面是自己想的一个小例子，用jQuery来实现类似图片轮播的效果：
<script type="text/javascript">
function f0() {
var tar1=$("#d1");
tar1.css("left","0");
var tar2=$("#d2");
tar2.css("left","0");
var tar3=$("#d3");
tar3.css("left","0");
var tar4=$("#d4");
tar4.css("left","0");
tar1.show();
tar2.show();
tar3.show();
tar4.show();
}
function f1(){
var tar1=$("#d1");
tar1.animate({
left:'250px'},"100ms");
tar1.fadeOut("100ms");
}
function f2(){
var tar2=$("#d2");
tar2.animate({
left:'250px'},"100ms");
tar2.fadeOut("100ms");
}
function f3(){
var tar3=$("#d3");
tar3.animate({
left:'250px'},"100ms");
tar3.fadeOut("100ms");
}
function f4(){
var tar4=$("#d4");
tar4.animate({
left:'250px'},"100ms");
tar4.fadeOut("100ms");
}
function F1() {
f0();
setTimeout("f1()",200);
setTimeout("f2()",400);
setTimeout("f3()",600);
setTimeout("f4()",800);
}
$(document).ready(function () {
$("#bt1").click(function () {
setInterval("F1()",2000)
})
})
</script>
如果将大量的函数再参数里面定义会显得很乱，所以在外面定义，定义好之后在里面调用，这样就可以让代码工整许多，此外当不同的对象又想按顺序执行时，可以采用推迟执行setTimeout的方法，两个参数第一个为推迟执行的函数名，第二个则是推迟执行的时间，需要注意的是这里的推迟是见到这行代码就推迟，推迟之后并不推迟读取下一条代码，所以才会有F1()里面的写法。另外还可以使用setInterval函数来实现循环执行，两个参数分别为需要循环执行的函数名以及循环的时间。
更多的jQuery效果可以参考效果手册：https://www.w3school.com.cn/jquery/jquery_ref_effects.asp