淡入淡出
淡入淡出: 不斷改變元素的透明度(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>