通過jquery實現(xiàn)頁面的動畫效果(實例代碼)
有很多函數(shù)可以用來實現(xiàn)動畫效果,其中animate函數(shù)為最為常見的函數(shù)之一。以下為對該函數(shù)使用方式的簡要介紹。
animate函數(shù)基本形式
通過animate實現(xiàn)動畫效果的基本形式為:
$(selector).animate({params},speed,callback);
其中{params}為必須項,它是一個對象,指明了我們希望指定元素通過動畫效果運行后,其所具有的的CSS樣式,speed和callback則皆為可選項,其中speed指明了動畫運行的速度,其值可為數(shù)值類型(如1000表示動畫在1s內(nèi)變?yōu)閜arams指定樣式)、slow以及fast。callback指明動畫運行結(jié)束后要執(zhí)行的函數(shù)。
代碼示例:
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); }); </script> </head> <body> <button>Start Animation</button> <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>
{params}對象中的變量的多種賦值形式
關(guān)于{params}對象中的變量,可以通過如下形式賦值。
絕對值形式
在上文給出的代碼示例便是通過絕對值形式來賦值params對象的
相對值形式
比如說在變量值前面加上“+”“-”等。
代碼示例:
<script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); }); </script>
show、hide以及toogle
params對象的變量值,我們同樣可以賦值為以上三個值,比如下面的代碼,其作用便是使div標(biāo)簽內(nèi)容消失。
$("button").click(function(){ $("div").animate({ height:'toggle' }); });
以上這篇通過jquery實現(xiàn)頁面的動畫效果(實例代碼)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- jQuery實現(xiàn)字符串全部替換的方法
- 解決同一頁面中兩個iframe互相調(diào)用jquery,js函數(shù)的方法
- jQuery實現(xiàn)刪除li節(jié)點的方法
- 詳解jQuery中的事件
- 利用JQuery阻止事件冒泡
- 基于jQuery的select下拉框選擇觸發(fā)事件實例分析
- 淺談jquery之on()綁定事件和off()解除綁定事件
- JQuery實現(xiàn)DIV其他動畫效果的簡單實例
- 利用jQuery的動畫函數(shù)animate實現(xiàn)豌豆發(fā)射效果
- 原生js實現(xiàn)jquery函數(shù)animate()動畫效果的簡單實例
- jQuery Ajax 加載數(shù)據(jù)時異步顯示加載動畫
- asp.net創(chuàng)建事務(wù)的方法
相關(guān)文章
jQuery Chart圖表制作組件Highcharts用法詳解
這篇文章主要介紹了jQuery Chart圖表制作組件Highcharts用法,詳細(xì)分析了Highcharts插件的功能與具體使用技巧及相關(guān)注意事項,需要的朋友可以參考下2016-06-06使用JQuery實現(xiàn)Ctrl+Enter提交表單的方法
這篇文章主要介紹了使用JQuery實現(xiàn)Ctrl+Enter提交表單的方法,需要的朋友可以參考下2015-10-10jQuery 獲取/設(shè)置/刪除DOM元素的屬性以a元素為例
這篇文章主要介紹了jQuery如何獲取/設(shè)置/刪除DOM元素的屬性,需要的朋友可以參考下2014-05-05模擬jQuery ajax服務(wù)器端與客戶端通信的代碼
本案例通過jQuery和Servlet技術(shù)來判斷用戶名是否存在,讓讀者明白jQuery是怎么調(diào)用服務(wù)器后臺的。還給出了解決中文亂碼的方案和如何避免各種瀏覽器的緩存。2011-03-03