border動畫效果不顯示
<!DOCTYPE html>
<html>
<head>
? ? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
? ? <title></title>
? ? <style>
? ? p {
? ? ? ? color: red;
? ? }
? ? div{
? ? ? ? width:200px;?
? ? ? ? height: 100px;?
? ? ? ? background-color: yellow;
? ? ? ? color:red;
? ? ? ? border:2px dashed 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>
? ? </select>
? ? <input id="exec" type="button" value="執行動畫">
? ? <script type="text/javascript">
? ? $("#exec").click(function() {
? ? ? ? var v = $("#animation").val();
? ? ? ? var $aaron = $("#aaron");
? ? ? ? if (v == "1") {
? ? ? ? ? ? // 數值的單位默認是px
? ? ? ? ? ? $aaron.animate({
? ? ? ? ? ? ? ? width ?:300,
? ? ? ? ? ? ? ? height :300,
? ? ? ? ? ? ? ? border:'4px solid red'
? ? ? ? ? ? });
? ? ? ? } else if (v == "2") {
? ? ? ? ? ? // 在現有高度的基礎上增加100px
? ? ? ? ? ? $aaron.animate({
? ? ? ? ? ? ? ? ?width ?: "+=100px",
? ? ? ? ? ? ? ? ?height : "+=100px"
? ? ? ? ? ? });
? ? ? ? } else if (v == "3") {
? ? ? ? ? ? $aaron.animate({
? ? ? ? ? ? ? ? fontSize: "5em"
? ? ? ? ? ? }, 2000, function() {
? ? ? ? ? ? ? ? alert("動畫 fontSize執行完畢!");
? ? ? ? ? ? });
? ? ? ? } else if (v == "4") {
? ? ? ? ? ? //通過toggle參數切換高度
? ? ? ? ? ? $aaron.animate({
? ? ? ? ? ? ? ? width: "toggle"
? ? ? ? ? ? });
? ? ? ? }?
? ? });
? ? </script>
</body>
</html>
如動畫一，為什么樣式里面加了border，不顯示borde動畫效果呢
2017-01-13
所有用于動畫的屬性必須是數字的，你這里這么寫border:'4px solid red'，邊框的顏色和類型不是數值類型的
2017-01-13
課程里面說border也能產生動畫效果，應該怎么樣做borde的動畫呢