淡入淡出
淡入淡出: 不断改变元素的透明度(opacity)来实现的
- fadeIn(): 带动画的显示
- fadeOut(): 带动画隐藏
- fadeToggle(): 带动画切换显示/隐藏
fadeIn
参数
- speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
- easing：:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn：在动画完成时执行的函数，每个元素执行一次。
示例代码
var $div1 = $('.div1') $('#btn1').click(function () { $div1.fadeOut(1000, function () alert('动画完成了!!!') }) })
fadeOut
参数
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
示例代码
var $div1 = $('.div1') $('#btn2').click(function () { $div1.fadeIn() })
fadeToggle
参数
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
示例代码
var $div1 = $('.div1') $('#btn3').click(function () { $div1.fadeToggle() })
滑动
滑动动画: 不断改变元素的高度实现
- slideDown(): 带动画的展开
- slideUp(): 带动画的收缩
- slideToggle(): 带动画的切换展开/收缩
slideDown
参数
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn:在动画完成时执行的函数，每个元素执行一次。
示例代码
var $div1 = $('.div1') // 1. 点击btn1, 向上滑动 $('#btn1').click(function () { $div1.slideUp(2000) })
slideUp
参数
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn:在动画完成时执行的函数，每个元素执行一次。
示例代码
var $div1 = $('.div1') // 2. 点击btn2, 向下滑动 $('#btn2').click(function () { $div1.slideDown() })
slideToggle
参数
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn:在动画完成时执行的函数，每个元素执行一次。
示例代码
var $div1 = $('.div1') $('#btn3').click(function () { $div1.slideToggle() })
显示与隐藏
显示隐藏，默认没有动画, 动画(opacity/height/width)
- show(): (不)带动画的显示
- hide(): (不)带动画的隐藏
- toggle(): (不)带动画的切换显示/隐藏
show
参数
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn:在动画完成时执行的函数，每个元素执行一次。
示例代码
立即显示与缓慢显示
var $div1 = $('.div1') //1. 点击btn1, 立即显示 $('#btn1').click(function () { $div1.show() }) //2. 点击btn2, 慢慢显示 $('#btn2').click(function () { $div1.show(1000) })
hide
参数
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn:在动画完成时执行的函数，每个元素执行一次。
示例代码
var $div1 = $('.div1') $('#btn3').click(function () { $div1.hide(1000) })
toggle
参数
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn:在动画完成时执行的函数，每个元素执行一次。
示例代码
立即显示与缓慢显示
var $div1 = $('.div1') $('#btn4').click(function () { $div1.toggle(1000) })
自定义动画
jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
- animate(): 自定义动画效果的动画
- stop(): 停止动画
参数
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.
fn:在动画完成时执行的函数，每个元素执行一次。
示例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义动画</title> <style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 100px; height: 100px; top: 50px; left: 300px; background: red; } </style> </head> <body> <button id="btn1">逐渐扩大</button> <button id="btn2">移动到指定位置</button> <button id="btn3">移动指定距离</button> <button id="btn4">停止动画</button> <div class="div1"> 沉默不是代表我的错，我也没有错 </div> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> var $div1 = $('.div1') /* 1. 逐渐扩大 宽先扩为200px, 高后扩为200px */ $('#btn1').click(function () { $div1 .animate({ width: 200 }, 1000) .animate({ height: 200 }, 1000) }) /* 2. 移动到指定位置 移动到(100, 20)处 */ $('#btn2').click(function () { // 移动到(100, 20)处 $div1.animate({ // 向左上移动 left: 100, // 300 top: 20 // 50 }, 1000) }) /* 3.移动指定的距离 移动距离为(-100, -20) */ $('#btn3').click(function () { // 移动距离为(-100, -20) $div1.animate({ left: '-=100', top: '-=20' }, 3000) }) $('#btn4').click(function () { $div1.stop() }) </script> </body> </html>
案例练习
动画实现动态导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航动态显示效果</title>
<style rel="stylesheet">
* {
margin: 0;
padding: 0;
word-wrap: break-word;
word-break: break-all;
}
body {
background: #FFF;
color: #333;
font: 12px/1.6em Helvetica, Arial, sans-serif;
}
a {
color: #0287CA;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul, li {
list-style: none;
}
img {
border: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1em;
}
html {
overflow: -moz-scrollbars-vertical; /* 在Firefox下始终显示滚动条*/
}
#navigation {
width: 784px;
padding: 8px;
margin: 8px auto;
background: #3B5998;
height: 18px;
}
#navigation ul li {
float: left;
margin-right: 14px;
position: relative;
z-index: 100;
}
#navigation ul li a {
display: block;
padding: 0 8px;
background: #EEEEEE;
font-weight: 700;
}
#navigation ul li a:hover {
background: none;
color: #fff;
}
#navigation ul li ul {
background-color: #88C366;
position: absolute;
width: 80px;
overflow: hidden;
display: none;
}
#navigation ul li ul li {
border-bottom: 1px solid #BBB;
text-align: left;
width: 100%;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">衬 衫</a>
<ul>
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">长袖衬衫</a></li>
<li><a href="#">无袖衬衫</a></li>
</ul>
</li>
<li><a href="#">卫 衣</a>
<ul>
<li><a href="#">开襟卫衣</a></li>
<li><a href="#">套头卫衣</a></li>
</ul>
</li>
<li>
<a href="#">裤 子</a>
<ul>
<li><a href="#">休闲裤</a></li>
<li><a href="#">卡其裤</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">短裤</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$('#navigation>ul>li:has(ul)').hover(function () {
//动画展开
$(this).children('ul').stop(true).slideDown()
}, function () {
// 动画收缩
$(this).children('ul').stop(true).slideUp()
})
</script>
</body>
</html>
