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