                        課程
                    
                        /前端開發
                        
                            /jQuery
                        
                        /jQuery基礎(四)—動畫篇

邊框該怎么用？出不來效果！

<!DOCTYPE?html>
<html>

<head>
????<meta?http-equiv="Content-type"?content="text/html;?charset=utf-8"?/>
????
????<title></title>
????<script?src="js/jquery-3.1.1.js"></script>
????
????<style>
????p?{
????????color:?red;
????}
????div{
????????width:200px;?
????????height:?100px;?
????????background-color:?yellow;?
????????color:red;
????????border:10?solid?red;
????}
????</style>
????<script?src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
????<h2>animate(上)</h2>
????<p>慕課網,專注分享</p>
????<div?id="aaron">內部動畫</div>
????點擊觀察動畫效果：
????<select?id="animation">
????????<option?value="1">動畫1</option>
????????<option?value="2">動畫2</option>
????????<option?value="3">動畫3</option>
????????<option?value="4">動畫4</option>
????????<option?value="5">動畫5</option>
????</select>
????<input?id="exec"?type="button"?value="執行動畫">
????<script?type="text/javascript">
????$('#exec').click(function(){
????	var?v=$('#animation').val();
????	var?$aaron=$('#aaron');
????	if(v=='1'){
????		$aaron.animate({
????			width:300,
????			height:300,
????			
????		});
????	}else?if(v=='2'){
????		?//?在現有高度的基礎上增加100px?
????		$aaron.animate({
????			width:'+=100px',
????			height:'+=100px'
????		});
????	}else?if(v=='3'){
????		$aaron.animate({
????			fontSize:'5em'
????		},3000,function(){
????			alert("動畫?fontSize執行完畢!");
????		});
????	}else?if(v=='4'){
????		$aaron.animate({
????			width:?"toggle",
????			height:?"toggle",
????			opacity:?"toggle",
//??			border:?"toggle"
????		},3000);
????	}else?if(v=='5'){
????		$aaron.animate({
????			border:?"toggle"
????		},2000)
????	}
????});
????</script>
</body>
</html>

慕數據5775487

2017-01-04

源自：jQuery基礎(四)—動畫篇 5-1

關注問題我要回答

914

操作

收起

3 回答

淡水狗
2017-07-22

你好，border里面含有邊框屬性和顏色屬性兩個參數。這些屬性如果不是數字的將不能使用基本的jQuery功能。老師已經講過了。只能在原有邊框的基礎上改變邊框的粗細。

例如：

?<style>
????div{
????????width:200px;?
????????height:?100px;?
????????background-color:?yellow;
????????color:red;
????????position:relative;
????????border:1px?solid?red;
????}
????</style>
????<script?src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
??
????<input?id="exec"?type="button"?value="執行動畫">
????<script?type="text/javascript">
????$("#exec").click(function(){
??????????a.animate({?
??????????????width:300,
??????????????height:300,
??????????????borderWidth:"4"?
??????????})
??????})

所有用于動畫的屬性必須是數字的，你這里這么寫?border:?"toggle"，這不是數值類型的。所以只能用borderWidth，borderBottomWidth，borderLeftWidth，borderRightWidth，borderTopWidth，borderSpacing