jquery中animate的使用

時間 2019-11-29

標籤 jquery animate 使用欄目 JQuery 简体版

原文原文鏈接

1、使用方法css

一、$("div").animate( {width:"300px"});html

$("div").animate( {'width':'300px'});jquery

$("div").animate( {'width':300+"px"});git

$("div").animate( {'width':300});github

$("div").animate( {width:300});函數

以上五種方法效果相同動畫

注：（1）屬性值須要被引號包裹起來，如前三種方法中都包含了字符串'px'則須要用引號。this

可是數值不須要，如第四五種方法中的300不須要引號，其中不區分單雙引號。spa

（2）屬性名能夠不被引號包裹，其中不區分單雙引號。.net

（3）當數值型的屬性值不加單位時，默認爲'px'。

二、$("div").animate( {width:"300px",fontSize:30});

（1）font-size這種中間帶有橫線的屬性須要去除橫線，可是須要將第二個單詞首字母大寫。

（2）當{}裏面放多個屬性時須要用逗號隔開。

三、$("div").animate({width:'300px',fontSize:30,backgroundColor:'red'},500);

（1）上述2中提到中間帶有橫線的屬性需去除橫線等，本例中backgroundColor同理，可是animate自己不能夠設置顏色等屬性，則須要引入以下js方可以使用：

　　<script src="jquery.animate-colors.js"></script>

下載地址：http://www.bitstorm.org/jquery/color-animation/

（2）animate({}，500) 表示執行該動畫的時間爲5秒。

（3）例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script src="jquery.animate-colors.js"></script>
<style>
.div span{
display: block;
width: 100px;
height: 200px;
border: 1px solid black;
cursor: pointer;
}
</style>
</head>
<body>
<div class="div">
<span>demo</span>
</div>
<script>
$('.div span').click(function(){
$(this).animate({fontSize:30,width:300+'px',backgroundColor:'red'},500);
});
</script>
</body>
</html>