一、.hover方法
描述：将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。
.hover()方法是同时绑定 mouseenter和 mouseleave事件。我们可以用它来简单地应用在 鼠标在元素上行为。
调用$(selector).hover(handlerIn, handlerOut)是以下写法的简写：
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
下面示例为模拟鼠标悬停
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
200px;
height: 200px;
border: 1px solid red;
}
.over{
background-color: yellow;
border: 5px dashed green;
color: blue;
}
.out{
background-color: red;
border: 5px solid yellow;
color: pink;
}
</style>
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<div>这是个有故事的div</div>
</body>
</html>
<script>
$('div').hover(function(){
this.className = 'over';
},function(){
this.className = 'out';
})
</script>
二、动画方法
jQuery中的动画效果都可以指定3种速度参数”slow”、”normal”、”fast”，甚至以毫秒为单位进行添加动画效果。
1.show()显示元素与hide()隐藏元素。
示例：点击标签，显示和隐藏div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示与隐藏</title>
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<h3>点我咯</h3>
<div>这是个有故事的div</div>
</body>
</html>
<script>
var flag = true
$('h3').bind('click',function(){
if(flag){
$(this).next().hide();
}else{
$('div').show();
}
flag = !flag;
})
</script>
2.fadeIn()与fadeOut()淡入淡出方法(颜色变淡最后消失)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='jquery-3.1.1.js'></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<h3 style=" 100px;background-color: red">点我看看咯</h3>
<div>这是个有故事的div</div>
</body>
</html>
<script>
var flag = true;
$('h3').click(function(){
if(flag){
$(this).next().fadeOut(5000);
}else{
$('div').fadeIn(5000);
};
flag = !flag;
})
</script>
3.slideUp()和slideDown()滑动方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动动画显示</title>
<link rel="stylesheet" href="donghua.css">
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<h3>点我咯</h3>
<div>梅刚是傻逼</div>
</body>
</html>
<script>
var flag = true;
$('h3').click(function(){
if(flag){
$(this).next().slideUp(3000);
}else{
$('div').slideDown(3000);
}
flag = !flag
})
</script>
Css样式
*{
margin: 0;
padding:0;
}
div{
background-color: red;
200px;
height: 200px;
position: relative;
}
h3{
background-color: green;
200px;
}
4.animate(params,[speed],[callback])自定义动画方法
参数说明：
params:一个包含样式属性及值的映射
speed:速度参数，可选
callback:动画完成时执行的函数，可选
注意：使用animate()方法之前，必须将元素的position样式改为”relative”或”absolute”
animate()方法可以实现
自定义简单动画
累加、累减动画(通过”+=”或”-=”设置位置)
(按顺序执行)多重动画
利用动画回调函数实现动画完成时的设置
判断元素是否处于动画状态
if(!$(element).is(“:animated”)){
// 如果当前没有进行动画，执行的代码
}
示例1：点击div,div向右下方移动，并变大，停止后，返回原位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义动画效果</title>
<script src='jquery-3.1.1.js'></script>
<link rel="stylesheet" href="donghua.css">
</head>
<body>
<div></div>
</body>
</html>
<script>
$('div').click(function(){
$(this).animate({
'500px',
height:'500px',
left:'300px',
top:'300px',
},5000,function(){
$(this).animate({
'100px',
height:'100',
left:0,
top:0
})
})
})
</script>
示例2：点击开始按钮，div向右移动，开始按钮变为暂停，点击移动中的div停止一定，按钮变为开始。（自定义动画累加累减效果实现）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
<title>Document</title>
</head>
<body>
<div></div>
<input type="button" value="开始" id="btn">
</body>
</html>
<script>
$(function(){
$('#btn').click(function(){
var $div = $('div');
if($div.is(":animated")){
$div.stop();
this.value = '开始';
}else{
$('div').animate({left:'+=200px'},3000);
this.value = '暂停';
}
})
})
</script>
5、toggle()方法
切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
show()与hide()方法的简写形式
示例：点击标签，div显示或隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<h3>点我</h3>
<div>这是个有故事的div</div>
</body>
</html>
<script>
$('h3').click(function(){
$(this).next().toggle(3000); //切换元素的可变状态
})
</script>
6、slideToggle()方法
slideUp和slideDown简写
slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
$(selector).toggle(speed,callback,switch)
speed 可选，规定元素从可见到隐藏的速度，默认0
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。如果设置此参数，则无法使用 switch 参数。
callback 可选。toggle 函数执行完之后，要执行的函数。
switch 可选，布尔值。规定 toggle 是否隐藏或显示所有被选元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<h3>点我</h3>
<div>这是一个有故事的div</div>
</body>
</html>
<script>
$('h3').click(function(){
$('div').slideToggle(3000); //切换元素可见状态
})
</script>
7. fadeTo()方法
fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。
语法：
$(selector).fadeTo(speed,opacity,callback)
speed 可选。规定元素从当前透明度到指定透明度的速度。
opacity 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
callback 可选。fadeTo 函数执行完之后，要执行的函数。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<h3>点我</h3>
<div>这是一个有故事的div</div>
</body>
</html>
<script>
$('h3').bind('click',function(){
$(this).next().fadeTo(3000,0.3,function(){
$(this).css('border','3px dashed green');
})
})
</script>
8、fadeToggle()方法
fadeToggle() 方法在fadeIn() 和fadeOut()方法之间切换。
如果元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。
如果元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。
注释：隐藏的元素不会被完全显示（不再影响页面的布局）。
语法：
$(selector).fadeToggle(speed,easing,callback)
speed 可选。规定褪色效果的速度
easing 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。(可选"linear" - 匀速移动，"swing" - 在开头/结尾移动慢，在中间移动快)
callvack 可选，fadeToggle() 方法执行完之后，要执行的函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<h3>点我</h3>
<div>这是一个有故事的div</div>
</body>
</html>
<script>
$('h3').click(function(){
$(this).next().fadeToggle();
})
</script>
二级菜单联动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级菜单效果</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
div{
20%;
background-color: green;
position: relative;
}
.submenu{
display: none;
}
ul h3{
border: 1px solid red;
}
</style>
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<div>
<ul>
<li>
<h3>美食</h3>
<ul class="submenu">
<li>地锅鸡</li>
<li>皮肚面</li>
<li>馒头</li>
</ul>
</li>
<li>
<h3>读书</h3>
<ul class="submenu">
<li>当代青年</li>
<li>皮囊</li>
<li>海子的诗</li>
</ul>
</li>
<li>
<h3>娱乐</h3>
<ul class="submenu">
<li>明星出轨</li>
<li>最新电影</li>
<li>杨幂离婚</li>
</ul>
</li>
</ul>
</div>
<input type="button" value="隐藏" id="btn">
</body>
</html>
<script>
$('h3').hover(function(){
$(this).css('background-color','red')
$(this).next().show(2000);
},function(){
$(this).css('background-color','yellow')
$(this).next().hide(2000);
});
var flag = true;
var div_width = $('div').css('width');//获取div的宽度
$('#btn').click(function(){
if(flag){
//$('div').css('left','-'+div_width);
$('div').animate({left:'-'+div_width},3000);
this.value = '显示';
}else{
$('div').animate({left:0},3000);
this.value = '隐藏'
}
flag = !flag;
});
</script>