jQuery 效果
jQuery 給我們封裝了很多動畫效果，最為常見的如下：
-
顯示隱藏：show() / hide() / toggle() ;
-
劃入畫出：slideDown() / slideUp() / slideToggle() ;
-
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
-
自定義動畫：animate() ;
注意：
動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。
jQuery為我們提供另一個方法，可以停止動畫排隊：stop() ;
一、顯示隱藏
顯示隱藏動畫，常見有三個方法：show() / hide() / toggle() ;
語法規範如下:
程式碼演示
<body>
<button>顯示</button>
<button>隱藏</button>
<button>切換</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
$("div").show(1000, function() {
alert(1);
});
})
$("button").eq(1).click(function() {
$("div").hide(1000, function() {
alert(1);
});
})
$("button").eq(2).click(function() {
$("div").toggle(1000);
})
// 一般情況下，我們都不加引數直接顯示隱藏就可以了
});
</script>
</body>
二、 滑入滑出
滑入滑出動畫，常見有三個方法：slideDown() / slideUp() / slideToggle() ;
語法規範如下:
程式碼演示
<body>
<button>下拉滑動</button>
<button>上拉滑動</button>
<button>切換滑動</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 下滑動 slideDown()
$("div").slideDown();
})
$("button").eq(1).click(function() {
// 上滑動 slideUp()
$("div").slideUp(500);
})
$("button").eq(2).click(function() {
// 滑動切換 slideToggle()
$("div").slideToggle(500);
});
});
</script>
</body>
小案例：下拉選單略（詳情參看原始碼）。
三、 淡入淡出
淡入淡出動畫，常見有四個方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
語法規範如下:
程式碼演示
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切換</button>
<button>修改透明度</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 淡入 fadeIn()
$("div").fadeIn(1000);
})
$("button").eq(1).click(function() {
// 淡出 fadeOut()
$("div").fadeOut(1000);
})
$("button").eq(2).click(function() {
// 淡入淡出切換 fadeToggle()
$("div").fadeToggle(1000);
});
$("button").eq(3).click(function() {
// 修改透明度 fadeTo() 這個速度和透明度要必須寫
$("div").fadeTo(1000, 0.5);
});
});
</script>
</body>
突出顯示案例：
<script>
$(function () {
$(".wrap li").hover(function () {
$(this).siblings().stop().fadeTo(200, .5);
}, function () {
$(this).siblings().stop().fadeTo(200, 1);
})
})
</script>
四、 自定義動畫
自定義動畫非常強大，通過引數的傳遞可以模擬以上所有動畫，方法為：animate() ;
語法規範如下:
程式碼演示
<body>
<button>動起來</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>
</body>
五、 事件切換
jQuery中為我們添加了一個新事件 hover() ; 功能類似 css 中的偽類 :hover 。介紹如下
語法
hover([over,]out) // 其中over和out為兩個函式
-
over:滑鼠移到元素上要觸發的函式（相當於mouseenter）
-
out:滑鼠移出元素要觸發的函式（相當於mouseleave）
-
如果只寫一個函式，則滑鼠經過和離開都會觸發它
六、 停止動畫排隊
動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。
停止動畫排隊的方法為：stop() ;
-
stop() 方法用於停止動畫或效果。
-
stop() 寫到動畫或者效果的前面， 相當於停止結束上一次的動畫。
總結: 每次使用動畫之前，先呼叫 stop() ,在呼叫動畫。
hover事件和停止動畫排列案例
<body>
<ul class="nav">
<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>
<li><a href="">@我</a></li></ul>
</li>
</ul>
<script>
$(function() {
// 滑鼠經過
// $(".nav>li").mouseover(function() {
// // $(this) jQuery 當前元素 this不要加引號
// // show() 顯示元素 hide() 隱藏元素
// $(this).children("ul").slideDown(200);
// });
// // 滑鼠離開
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp(200);
// });
// 1. 事件切換 hover 就是滑鼠經過和離開的複合寫法
// $(".nav>li").hover(function() {
// $(this).children("ul").slideDown(200);
// }, function() {
// $(this).children("ul").slideUp(200);
// });
// 2. 事件切換 hover 如果只寫一個函式，那麼滑鼠經過和滑鼠離開都會觸發這個函式
$('.nav>li').hover(function(){
$(this).children('ul').slideToggle();
});
$(".nav>li").hover(function() {
// stop 方法必須寫到動畫的前面
$(this).children("ul").stop().slideToggle();
});
})
</script>
</body>
案例：王者榮耀手風琴效果
思路分析:
1.滑鼠經過某個小li 有兩步操作：
2.當前小li 寬度變為 224px， 同時裡面的小圖片淡出，大圖片淡入
3.其餘兄弟小li寬度變為69px， 小圖片淡入， 大圖片淡出
<script>
$(function () {
$(".king ul li").mouseenter(function () {
// 滑鼠經過小li，當前li寬變為240px，同時大圖片淡入，小圖片淡出
$(this).stop().animate({
width: 224
}).find(".big").stop().fadeIn().siblings(".small").stop().fadeOut();
// 其他兄弟寬度變為69px，大圖片淡出，小圖片淡入
$(this).siblings("li").stop().animate({
width: 69
}).find(".big").stop().fadeOut().siblings(".small").stop().fadeIn();
})
})
</script>