使用帶邊框屬性的jQuery動畫

<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <!--<SCRIPT type="text/javascript" src="jquery-1.8.3.min.js"></SCRIPT>--> 
     <SCRIPT type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></SCRIPT> 
     <style type="text/css"> 
      #content { 
       border:0px solid #ff9999; 
       width:0px; 
       height:0px; 
       padding:3px; 
      } 
     </style> 
    </head> 

    <body> 
     <input id="btn" type="button" value="Animate"/> 
     <div id="content"></div> 
    </body> 
    <script> 
     $(document).ready(function(){ 
      $('#btn').click(function(){ 
       $('#content') 
       .animate({ 
        "borderLeftWidth":"1px", 
        "height":"400px" 

       },1000) 
       .animate({ 
        "borderBottomWidth":"1px", 
        "width":"400px" 
       },1000) 
       .animate({"borderRightWidth":"1px" 
       },1000) 
       .animate({"borderTopWidth":"1px" 
       },1000) 
      }); 
     }); 
    </script> 
</html>

我想通過使用jQuery的動畫功能做一些有用的事情。所以如果你運行我的代碼，你可以看到border-left和border-bottom是連續生成的，因爲我的寬度和高度都在增加。但在此之後，邊界右邊和邊界剛剛彈出。我希望他們被動畫爲左邊界和下邊界。我會怎麼做？使用帶邊框屬性的jQuery動畫

來源

2013-02-17 ntstha

您正在將零像素的內容製作爲一個像素，並且要獲得動畫，必須在兩者之間插入一些內容。當從沒有像素到一個像素時，你如何期望你的屏幕顯示0.3像素？這就是邊界出現的原因，從零到一步只是一個步驟，而且你不能真正地爲其製作動畫！

來源

2013-02-17 14:46:28 adeneo

所以這是不可能的呢？有沒有辦法做到這一點？ – ntstha 2013-02-17 14:50:25

它不是關於動畫的邊界的寬度。我想要邊界做一個正方形。從一個點開始，然後增加，直到它成爲一個正方形。 – ntstha 2013-02-17 14:52:26

如果你正在考慮像邊界這樣的東西開始在某個時刻變得可見，那麼就像一條越來越長的蛇一樣在元素周圍移動，這是不可能的。好吧，任何事情都是可能的，但這並不容易！ – adeneo 2013-02-17 14:55:16

認爲我找到了解決方案。使相對位置的複選框，然後放四個格在「絕對」，這樣的事情：

HTML：

<div id="my_contents"> 
    <div id="border_top"></div> 
    <div id="border_right"></div> 
    <div id="border_bottom"></div> 
    <div id="border_left"></div> 
</div>

CSS：

#my_contents { 
    position: relative; 
    width: 200px 
    height: 200px 
} 

#border_top { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 0; 
    height: 1px; 
    border-top: 1px solid #000; 
} 

#border_right { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 1px; 
    height: 0; 
    border-right: 1px solid #000; 
} 

#border_bottom { 
    position: absolute; 
    bottom: 0px; 
    left: 200px; 
    width: 200px; 
    height: 1px; 
    border-bottom: 1px solid #000; 
} 

#border_left { 
    position: absolute; 
    left: 0px; 
    top: 200px; 
    width: 1px; 
    height: 200px; 
    border-left: 1px solid #000; 
}

JQuery：

$('#border_top').animate({'width':'200px'}, 1200); 
$('#border_right').delay(1200).animate({'height':'200px'}, 1200); 
$('#border_bottom').delay(1800).animate({'left':'0'}, 1200); 
$('#border_left').delay(2400).animate({'top':'0'}, 1200);

希望這是你的意思:)

來源

2014-03-02 11:03:52 mimelaine

使用帶邊框屬性的jQuery動畫

回答

相關問題