通過jquery實現(xiàn)頁面的動畫效果(實例代碼)

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

下面小編就為大家?guī)硪黄ㄟ^jquery實現(xiàn)頁面的動畫效果(實例代碼)。小編覺得挺不錯的，現(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標簽內(nèi)容消失。

$("button").click(function(){
 $("div").animate({
  height:'toggle'
 });
});

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

您可能感興趣的文章:

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

通過jquery實現(xiàn)頁面的動畫效果(實例代碼)

相關(guān)文章

最新評論

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

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

常用在線小工具