首頁 >web前端 >js教程 >透過jquery實現頁面的動畫效果(實例代碼)

透過jquery實現頁面的動畫效果(實例代碼)

高洛峰原創: 2016-12-28 10:35:051337瀏覽

有很多函數可以用來實現動畫效果，其中animate函數為最常見的函數之一。以下為對此函數使用方式的簡要介紹。

animate函數基本形式

透過animate實現動畫效果的基本形式為：

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

其中{params}為必須項，它是一個物件，指明了我們希望指定元素透過動畫效果運行後，其所具有的CSS樣式，speed和callback則皆為可選項，其中speed指明了動畫運行的速度，其值可為數值類型（如1000表示動畫在1s內變成params指定樣式）、slow以及fast。 callback指明動畫運行結束後要執行的函數。

程式碼範例：

<!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:&#39;250px&#39;,
   opacity:&#39;0.5&#39;,
   height:&#39;150px&#39;,
   width:&#39;150px&#39;
  });
 });
});
</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}物件中的變數的多種賦值形式

關於{params}物件中的變量，可以透過以下形式賦值。

絕對值形式

在上文給出的程式碼範例是透過絕對值形式來賦值params物件的

相對值形式

比如說在變數值前面加上「+」「-」等。

程式碼範例：

<script> 
$(document).ready(function(){
 $("button").click(function(){
  $("div").animate({
   left:&#39;250px&#39;,
   height:&#39;+=150px&#39;,
   width:&#39;+=150px&#39;
  });
 });
});
</script>

show、hide以及toogle

params物件的變數值，我們同樣可以賦值為以上三個值，例如下面的程式碼，其作用便是使div標籤內容消失。

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

以上這篇透過jquery實現頁面的動畫效果(實例代碼)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。

更多透過jquery實現頁面的動畫效果(實例代碼)相關文章請關注PHP中文網！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：基於jQuery的select下拉方塊選擇觸發事件實例分析下一篇：基於jQuery的select下拉方塊選擇觸發事件實例分析

看更多