通過jquery實(shí)現(xiàn)頁面的動(dòng)畫效果(實(shí)例代碼)
有很多函數(shù)可以用來實(shí)現(xiàn)動(dòng)畫效果，其中animate函數(shù)為最為常見的函數(shù)之一。以下為對(duì)該函數(shù)使用方式的簡要介紹。
animate函數(shù)基本形式
通過animate實(shí)現(xiàn)動(dòng)畫效果的基本形式為：
$(selector).animate({params},speed,callback);
其中{params}為必須項(xiàng)，它是一個(gè)對(duì)象，指明了我們希望指定元素通過動(dòng)畫效果運(yùn)行后，其所具有的的CSS樣式，speed和callback則皆為可選項(xiàng)，其中speed指明了動(dòng)畫運(yùn)行的速度，其值可為數(shù)值類型（如1000表示動(dòng)畫在1s內(nèi)變?yōu)閜arams指定樣式）、slow以及fast。callback指明動(dòng)畫運(yùn)行結(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}對(duì)象中的變量的多種賦值形式
關(guān)于{params}對(duì)象中的變量，可以通過如下形式賦值。
絕對(duì)值形式
在上文給出的代碼示例便是通過絕對(duì)值形式來賦值params對(duì)象的
相對(duì)值形式
比如說在變量值前面加上“+”“-”等。
代碼示例：
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
show、hide以及toogle
params對(duì)象的變量值，我們同樣可以賦值為以上三個(gè)值，比如下面的代碼，其作用便是使div標(biāo)簽內(nèi)容消失。
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
以上這篇通過jquery實(shí)現(xiàn)頁面的動(dòng)畫效果(實(shí)例代碼)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- jQuery實(shí)現(xiàn)字符串全部替換的方法
- 解決同一頁面中兩個(gè)iframe互相調(diào)用jquery,js函數(shù)的方法
- jQuery實(shí)現(xiàn)刪除li節(jié)點(diǎn)的方法
- 詳解jQuery中的事件
- 利用JQuery阻止事件冒泡
- 基于jQuery的select下拉框選擇觸發(fā)事件實(shí)例分析
- 淺談jquery之on()綁定事件和off()解除綁定事件
- JQuery實(shí)現(xiàn)DIV其他動(dòng)畫效果的簡單實(shí)例
- 利用jQuery的動(dòng)畫函數(shù)animate實(shí)現(xiàn)豌豆發(fā)射效果
- 原生js實(shí)現(xiàn)jquery函數(shù)animate()動(dòng)畫效果的簡單實(shí)例
- jQuery Ajax 加載數(shù)據(jù)時(shí)異步顯示加載動(dòng)畫
- asp.net創(chuàng)建事務(wù)的方法
相關(guān)文章
jquery 動(dòng)態(tài)遍歷select 賦值的實(shí)例
今天小編就為大家分享一篇jquery 動(dòng)態(tài)遍歷select 賦值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
JQuery 文本框使用小結(jié)，主要是事件的綁定，結(jié)合下js的用法。2010-05-05
jQuery的選擇包含兩種，一種是選擇器，一種是篩選器。篩選器是對(duì)選擇器選定的jQuery對(duì)象做進(jìn)一步選擇;記下來將詳細(xì)介紹下篩選器children()感興趣的你可不要錯(cuò)過了哈，或許本文的知識(shí)點(diǎn)對(duì)你有所幫助2013-02-02
jquery $.ajax()取xml數(shù)據(jù)的小問題解決方法
今天想做一個(gè)用$.ajax()從xml中讀取數(shù)據(jù)的這么一個(gè)異步交互過程2010-11-11
jquery下拉select控件操作方法分享(jquery操作select)
這篇文章主要介紹了jquery下拉select控件操作方法分享(jquery操作select),需要的朋友可以參考下2014-03-03
jQuery新的事件綁定機(jī)制on()示例應(yīng)用
從jQuery1.7開始，jQuery引入了全新的事件綁定機(jī)制，on()和off()兩個(gè)函數(shù)統(tǒng)一處理事件綁定，下面通過示例為大家介紹下2014-07-07
JQuery UI有著非常豐富的皮膚，JQuery官方提供的就有十幾套，除了官方提供的之外，JQuery還提供了定制皮膚的服務(wù)2009-07-07
jquery ajax post提交數(shù)據(jù)亂碼
今天發(fā)現(xiàn)在使用jquery ajax.post提交數(shù)據(jù)時(shí)會(huì)發(fā)現(xiàn)數(shù)據(jù)在ff正常，但在chrome與ie瀏覽器中post過去的數(shù)據(jù)全部是亂碼2013-11-11
今天工作的時(shí)候遇到一個(gè)問題，下面的代碼運(yùn)行之后每次彈出來的都是1，詳細(xì)的解決方法如下，需要的朋友參考下2013-11-11
jquery下動(dòng)態(tài)顯示jqGrid以及jqGrid的屬性設(shè)置容易出現(xiàn)問題的解決方法
jquery下動(dòng)態(tài)顯示jqGrid以及jqGrid的屬性設(shè)置容易出現(xiàn)問題的解決方法，使用jqgrid的朋友可以參考下。2010-10-10