使用带边框属性的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动画

回答

相关问题