生活随笔
收集整理的這篇文章主要介紹了
jQuery 之 [ 动画 ]
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
jQuery動(dòng)畫(huà)
- 分為預(yù)定義動(dòng)畫(huà)和自定義動(dòng)畫(huà)
預(yù)定義動(dòng)畫(huà)
- 顯示和隱藏動(dòng)畫(huà)效果
- 滑動(dòng)式動(dòng)畫(huà)效果
- 淡入和淡出動(dòng)畫(huà)效果
顯示和隱藏
-
show( )方法
- 表示顯示動(dòng)畫(huà)效果“括號(hào)中填寫(xiě)動(dòng)畫(huà)執(zhí)行的時(shí)間 - 毫秒”
-
hide( )方法
- 表示隱藏動(dòng)畫(huà)效果“括號(hào)中填寫(xiě)動(dòng)畫(huà)執(zhí)行的時(shí)間 - 毫秒”
-
toggle( )方法
- 表示顯示和隱藏的動(dòng)畫(huà)效果“括號(hào)中填寫(xiě)動(dòng)畫(huà)執(zhí)行的時(shí)間 - 毫秒”
<body>
<button id="b1">顯示</button>
<button id="b2">隱藏</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>/*顯示和隱藏動(dòng)畫(huà)效果show( )方法 - 表示顯示動(dòng)畫(huà)效果“括號(hào)中填寫(xiě)動(dòng)畫(huà)執(zhí)行的時(shí)間 - 毫秒”hide( )方法 - 表示隱藏動(dòng)畫(huà)效果“括號(hào)中填寫(xiě)動(dòng)畫(huà)執(zhí)行的時(shí)間 - 毫秒”*//* 定位顯示和隱藏按鈕位置 */var $b1 = $( '#b1' );var $b2 = $( '#b2' );/* 定位執(zhí)行動(dòng)畫(huà)元素的位置 */var $d1 = $( '#d1' );/* 為指定元素綁定事件 */$b1.click( function () {/* 為指定元素設(shè)置顯示動(dòng)畫(huà)效果 */$d1.show( 5000 );} );/* 為指定元素綁定事件 */$b2.click( function () {/* 為指定元素設(shè)置隱藏動(dòng)畫(huà)效果 */$d1.hide( 5000 );} );/* 為指定按鈕綁定事件 */$b1.click( function () {/* 為指定元素設(shè)置顯示和隱藏的動(dòng)畫(huà)效果 */$d1.toggle( 5000 );} );
</script>
</body>
滑動(dòng)式動(dòng)畫(huà)
-
slideDown( )方法
- 表示從上向下滑動(dòng)“括號(hào)中填寫(xiě)動(dòng)畫(huà)執(zhí)行時(shí)間 - 毫秒”
-
slideUp( )方法
- 表示從下向上滑動(dòng)“括號(hào)中填寫(xiě)動(dòng)畫(huà)執(zhí)行時(shí)間 - 毫秒”
-
slideToggle( )方法
- 表示滑動(dòng)式動(dòng)畫(huà)效果“括號(hào)中填寫(xiě)動(dòng)畫(huà)執(zhí)行時(shí)間 - 毫秒”
<body>
<button id="b1">顯示</button>
<button id="b2">隱藏</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>/*滑動(dòng)式動(dòng)畫(huà)slideDown( )方法 - 表示從上向下滑動(dòng)“括號(hào)中填寫(xiě)動(dòng)畫(huà)執(zhí)行時(shí)間 - 毫秒”slideUp( )方法 - 表示從下向上滑動(dòng)“括號(hào)中填寫(xiě)動(dòng)畫(huà)執(zhí)行時(shí)間 - 毫秒”*//* 定位顯示和隱藏按鈕位置 */var $b1 = $( '#b1' );var $b2 = $( '#b2' );/* 定位執(zhí)行動(dòng)畫(huà)元素的位置 */var $d1 = $( '#d1' );/* 為指定元素綁定事件 */$b1.click( function () {/* 為指定元素設(shè)置從上向下滑動(dòng)動(dòng)畫(huà)效果 */$d1.slideDown( 5000 );} );/* 為指定元素綁定事件 */$b2.click( function () {/* 為指定元素設(shè)置從下向上滑動(dòng)動(dòng)畫(huà)效果 */$d1.slideUp( 5000 );} );/* 為指定按鈕綁定事件 */$b1.click( function () {/* 為指定元素設(shè)置滑動(dòng)式動(dòng)畫(huà)效果 */$d1.slideToggle( 5000 );} );
</script>
</body>
淡入和淡出
-
fadeIn( )方法
- 表示淡入動(dòng)畫(huà)效果“括號(hào)中填寫(xiě)動(dòng)畫(huà)執(zhí)行時(shí)間 - 毫秒”
-
fadeOut( )方法
- 表示淡出動(dòng)畫(huà)效果“括號(hào)中填寫(xiě)動(dòng)畫(huà)執(zhí)行時(shí)間 - 毫秒”
-
fadeToggle( )方法
- 表示淡入和淡出的動(dòng)畫(huà)效果“括號(hào)中填寫(xiě)動(dòng)畫(huà)執(zhí)行時(shí)間 - 毫秒”
<body>
<button id="b1">顯示</button>
<button id="b2">隱藏</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>/*淡入和淡出動(dòng)畫(huà)效果fadeIn( )方法 - 表示淡入動(dòng)畫(huà)效果“括號(hào)中填寫(xiě)動(dòng)畫(huà)執(zhí)行時(shí)間 - 毫秒”fadeOut( )方法 - 表示淡出動(dòng)畫(huà)效果“括號(hào)中填寫(xiě)動(dòng)畫(huà)執(zhí)行時(shí)間 - 毫秒”*//* 定位顯示和隱藏按鈕位置 */var $b1 = $( '#b1' );var $b2 = $( '#b2' );/* 定位執(zhí)行動(dòng)畫(huà)元素的位置 */var $d1 = $( '#d1' );/* 為指定元素綁定事件 */$b1.click( function () {/* 為指定元素設(shè)置淡入動(dòng)畫(huà)效果 */$d1.fadeIn( 5000 );} );/* 為指定元素綁定事件 */$b2.click( function () {/* 為指定元素設(shè)置淡出動(dòng)畫(huà)效果 */$d1.fadeOut( 5000 );} );/* 為指定按鈕綁定事件 */$b1.click( function () {/* 為指定元素設(shè)置淡入和淡出的動(dòng)畫(huà)效果 */$d1.fadeToggle( 5000 );} );
</script>
</body>
自定義動(dòng)畫(huà)
animate（ ）方法
<body>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>/*自定義動(dòng)畫(huà)animate（ ）方法 - 表示設(shè)置動(dòng)畫(huà)顯示效果括號(hào)中填寫(xiě)：* 動(dòng)畫(huà)執(zhí)行效果 - css樣式“用大括號(hào)｛｝包裹”* 動(dòng)畫(huà)執(zhí)行時(shí)間 - 毫秒* 動(dòng)畫(huà)返回函數(shù)*/var $div = $( '#d1' );$div.animate( {top : '300px',left : '300px'}, 5000 );
</script>
</body>
動(dòng)畫(huà)的并發(fā)和排隊(duì)
-
并發(fā)
- 表示同時(shí)執(zhí)行設(shè)置的動(dòng)畫(huà)效果
-
排隊(duì)
- 表示前一個(gè)設(shè)置的動(dòng)畫(huà)效果執(zhí)行完畢 在執(zhí)行下一個(gè)
<body>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>/*動(dòng)畫(huà)的并發(fā)和排隊(duì)并發(fā) - 表示同時(shí)執(zhí)行設(shè)置的動(dòng)畫(huà)效果排隊(duì) - 表示前一個(gè)設(shè)置的動(dòng)畫(huà)效果執(zhí)行完畢 在執(zhí)行下一個(gè)*//* 并發(fā)執(zhí)行動(dòng)畫(huà)效果 */var $div = $( '#d1' );$div.animate( {top : '300px',left : '300px'}, 5000 );/* 排隊(duì)執(zhí)行動(dòng)畫(huà)效果 */$div.animate( {top : '300px'},3000 ).animate( {left : '300px'},3000 );
</script>
</body>
停止動(dòng)畫(huà)
stop( )方法
<body>
<button id="ks">開(kāi)始</button>
<button id="tz">停止</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>/*停止動(dòng)畫(huà)stop( )方法 - 表示目標(biāo)元素執(zhí)行的動(dòng)畫(huà)效果停止* 括號(hào)中填寫(xiě)兩個(gè)參數(shù) - 布爾值* 一個(gè)true時(shí) - 表示停止目標(biāo)元素的所有動(dòng)畫(huà)效果* 兩個(gè)true時(shí) - 表示停止目標(biāo)元素的所有動(dòng)畫(huà)效果并且結(jié)束當(dāng)前執(zhí)行的動(dòng)畫(huà)* 不填寫(xiě)時(shí) - 表示停止目標(biāo)元素當(dāng)前正在執(zhí)行的動(dòng)畫(huà)效果*//* 定位開(kāi)始按鈕位置 */var $ks = $( '#ks' );/* 定位停止按鈕位置 */var $tz = $( '#tz' );/* 定位綁定事件元素的位置 */var $d1 = $( '#d1' );/* 為指定元素綁定事件 */$ks.click( function () {/* 為指定元素設(shè)置動(dòng)畫(huà)效果 */$d1.animate( {left : '1000px'}, 3000 ).animate( {top : '1000px'}, 3000 );} );/* 為指定元素綁定事件 */$tz.click( function () {/* 為指定元素設(shè)置動(dòng)畫(huà)停止效果 */$d1.stop( true, true );} );
</script>
</body>
延遲執(zhí)行動(dòng)畫(huà)
delay( )方法
- 表示為指定元素設(shè)置的動(dòng)畫(huà)效果進(jìn)行延遲執(zhí)行“括號(hào)中填寫(xiě)動(dòng)畫(huà)延遲多少時(shí)間 - 毫秒”
<body>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>/*延遲執(zhí)行動(dòng)畫(huà)delay( )方法 - 表示為指定元素設(shè)置的動(dòng)畫(huà)效果進(jìn)行延遲執(zhí)行* 括號(hào)中填寫(xiě)延遲多少時(shí)間 - 毫秒*/$( '#d1' ).delay( 2000 ).animate( {left : '1000px'}, 5000 );
</script>
</body>
總結(jié)
以上是生活随笔為你收集整理的jQuery 之 [ 动画 ]的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
