jQuery實現獲取元素索引值index的方法
640
2024-02-17
有很多函數可以用來實現動畫效果，其中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:'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}對象中的變量的多種賦值形式
關于{params}對象中的變量，可以通過如下形式賦值。
絕對值形式
在上文給出的代碼示例便是通過絕對值形式來賦值params對象的
相對值形式
比如說在變量值前面加上“+”“-”等。
代碼示例：
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
show、hide以及toogle
params對象的變量值，我們同樣可以賦值為以上三個值，比如下面的代碼，其作用便是使div標簽內容消失。
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
以上這篇通過jquery實現頁面的動畫效果(實例代碼)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持綠夏網。
