快捷導(dǎo)航

通過(guò)jquery實(shí)現(xiàn)頁(yè)面的動(dòng)畫(huà)效果(實(shí)例代碼)

更新時(shí)間：2016年09月18日 11:39:17 投稿：jingxian

下面小編就為大家?guī)?lái)一篇通過(guò)jquery實(shí)現(xiàn)頁(yè)面的動(dòng)畫(huà)效果(實(shí)例代碼)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

有很多函數(shù)可以用來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果，其中animate函數(shù)為最為常見(jiàn)的函數(shù)之一。以下為對(duì)該函數(shù)使用方式的簡(jiǎn)要介紹。

animate函數(shù)基本形式

通過(guò)animate實(shí)現(xiàn)動(dòng)畫(huà)效果的基本形式為：

$(selector).animate({params},speed,callback);

其中{params}為必須項(xiàng)，它是一個(gè)對(duì)象，指明了我們希望指定元素通過(guò)動(dòng)畫(huà)效果運(yùn)行后，其所具有的的CSS樣式，speed和callback則皆為可選項(xiàng)，其中speed指明了動(dòng)畫(huà)運(yùn)行的速度，其值可為數(shù)值類(lèi)型（如1000表示動(dòng)畫(huà)在1s內(nèi)變?yōu)閜arams指定樣式）、slow以及fast。callback指明動(dòng)畫(huà)運(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ì)象中的變量，可以通過(guò)如下形式賦值。

絕對(duì)值形式

在上文給出的代碼示例便是通過(guò)絕對(duì)值形式來(lái)賦值params對(duì)象的

相對(duì)值形式

比如說(shuō)在變量值前面加上“+”“-”等。

代碼示例：

<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'
 });
});

以上這篇通過(guò)jquery實(shí)現(xiàn)頁(yè)面的動(dòng)畫(huà)效果(實(shí)例代碼)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

通過(guò)jquery實(shí)現(xiàn)頁(yè)面的動(dòng)畫(huà)效果(實(shí)例代碼)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具