jQuery常見動畫效果實現(xiàn)介紹
1.常見的動畫效果
jQuery給我們封裝了很多動畫效果,最為常見的如下:
| 顯示隱藏 | show() hide() toggle() |
| 滑動 | slideDown() slideUp() slideToggle() |
| 淡入淡出 | fadeIn() fadeOut() fadeToggle() fadeTo() |
| 自定義動畫 | animate() |
2.顯示隱藏效果
顯示語法規(guī)范
show([speed,[easing],[fn]])
顯示參數(shù)
1.參數(shù)都可以省略,無動畫直接顯示。
2.speed :三種預定速度之一的字符串( "slow" ，"normal" , or "fast" )或表示動畫時長的毫秒數(shù)值(如: 1000)。
3.easing : (Optional)用來指定切換效果,默認是"swing” ,可用參數(shù)"linear" 。
4.fn:回調(diào)函數(shù),在動畫完成時執(zhí)行的函數(shù),每個元素執(zhí)行一次。
隱藏語法規(guī)范
hide([speed,[easing],[fn]])
隱藏參數(shù)
1.參數(shù)都可以省略,無動畫直接顯示。
2.speed :三種預定速度之一的字符串( "slow" ，"normal" , or "fast" )或表示動畫時長的毫秒數(shù)值(如: 1000)。
3.easing : (Optional)用來指定切換效果,默認是"swing” ,可用參數(shù)"linear" 。
4.fn:回調(diào)函數(shù),在動畫完成時執(zhí)行的函數(shù),每個元素執(zhí)行一次。
3.滑動效果
滑動效果的語法規(guī)范和參數(shù)與顯示隱藏效果相同，這里我們用一個案例加以說明：
給我們之前寫過的下拉菜單加上滑動效果：
// 鼠標經(jīng)過
$(".nav>li").mouseover(function() {
//$(this) jQuery 當前元素 this不要加引號
// show() 顯示元素 hide() 隱藏元素
$(this).children("ul").slideDown(200);
});
// 鼠標離開
$(".nav>li").mouseout(function() {
$(this).children("ul").slideUp(200);
});但是jQuery覺得這樣寫太復雜了，于是有了事件切換：
// 1. 事件切換 hover 就是鼠標經(jīng)過和離開的復合寫法
$(".nav>li").hover(function() {
$(this).children("ul").slideDown(200);
}, function() {
$(this).children("ul").slideUp(200);
});hover里面第一個函數(shù)是鼠標經(jīng)過時觸發(fā)的，第二個是鼠標離開時觸發(fā)的，他和前面的代碼有相同的效果，但是jQuery覺得這樣還是太復雜，這下只需要一個函數(shù)就可以實現(xiàn)效果：
// 2. 事件切換 hover 如果只寫一個函數(shù)，那么鼠標經(jīng)過和鼠標離開都會觸發(fā)這個函數(shù)
$(".nav>li").hover(function() {
$(this).children("ul").slideToggle();
});但是當我們鼠標快速經(jīng)過離開時，每次都會觸發(fā)，就造成多個動畫或者效果排隊執(zhí)行
停止排隊：
stop()
- stop()方法用于停止動畫或效果
- 注意：stop()寫到動畫或者效果的前面，相當于停止結(jié)束上一次的動畫
修改一下我們上例的代碼：
$(".nav>li").hover(function() {
$(this).children("ul").stop().slideToggle();
});4.自定義動畫animate
fadeIn(params,[speed],[easing],[fn]])
參數(shù)
- params:想要更改的樣式屬性,以對象形式傳遞，必須寫。屬性名可以不用帶引號，如果是復合屬性則需要采取駝峰命名法borderLeft.其余參數(shù)都可以省略。
- speed :三種預定速度之一的字符串( "slow" ，"normal" , or "fast" )或表示動畫時長的毫秒數(shù)值(如: 1000)。
- easing : (Optional)用來指定切換效果,默認是"swing” , 可用參數(shù)"linear" 。
- fn:回調(diào)函數(shù),在動畫完成時執(zhí)行的函數(shù),每個元素執(zhí)行一次。
小案例
實現(xiàn)效果：
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
$(function() {
$('div').click(function() {
$(this).animate({
left:400,
width:500
},500);
})
});
</script>
</body>
</html>到此這篇關于jQuery常見動畫效果實現(xiàn)介紹的文章就介紹到這了,更多相關jQuery動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
jQuery固定浮動側(cè)邊欄實現(xiàn)思路及代碼
如果頁面比較高，當滾動條拖到頁面的下面的時候，側(cè)邊欄會出現(xiàn)一個固定跟隨瀏覽器的DIV框，下面將思路及具體實現(xiàn)與大家分享下2014-09-09
使用jQueryMobile實現(xiàn)滑動翻頁效果的方法
這篇文章主要介紹了使用jQueryMobile實現(xiàn)滑動翻頁效果的方法,較為詳細的分析了jQueryMobile實現(xiàn)滑動翻頁效果的原理與實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
jquery實現(xiàn)Li滾動時滾動條自動添加樣式的方法
這篇文章主要介紹了jquery實現(xiàn)Li滾動時滾動條自動添加樣式的方法,實例分析了jquery響應鼠標事件及動態(tài)添加樣式的相關技巧,需要的朋友可以參考下2015-08-08
這次我們要實現(xiàn)的控件時Tab控件，在實際的應用中也比較多2010-05-05
Jquery修改image的src屬性,圖片不加載問題的解決方法
下面小編就為大家?guī)硪黄狫query修改image的src屬性,圖片不加載問題的解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
在網(wǎng)站前端中使用jQuery庫已經(jīng)變得越來越流行，前端開發(fā)人員發(fā)布或撰寫的相關的插件和教程也與日俱增。2010-03-03
這篇文章主要介紹了jQuery實現(xiàn)按比例縮放圖片的方法,涉及jQuery針對頁面元素的獲取、屬性運算、設置等相關操作技巧,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細介紹了jquery實現(xiàn)簡單實用的輪播器制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
基于jquery的實現(xiàn)異步跨域提交表單的實現(xiàn)代碼，需要的朋友可以參考下。2010-11-11
jQuery頁面圖片伴隨滾動條逐漸顯示的小例子，需要的朋友可以參考一下2013-03-03