html - CSS animation - How to fill in "starting from border"? -


quite simple question, really, not find online.

basically, how animate fill-in specific color of element starting @ border?

e.g border gets bigger , bigger until shape filled.

if understand question want animate border-width of element, maybe border-top-width, don't think create effect looking for, increasing border push element as border width gets set to, won't if element being filled, can animate nested element cover outer element, can check example see i'm saying

the html:

<style> #theborderdiv, #thetwodivs {   display: inline-block; background-color: #ccc; height: 0px; width: 300px; border-top-color: red; border-top-style: solid; border-top-width: 1px; height: 200px; vertical-align: top; }  #thetwodivs{   margin-top: 200px;   position: relative; }  #theinnerdiv {   position: absolute;   top:0px;   height: 0px;   width: 300px;   background-color: red; }     </style> <div id="theborderdiv"></div>  <div id="thetwodivs">      <div id="theinnerdiv"></div> </div> 

the javascript:

 <script type="text/javascript">             $('#theborderdiv').animate({bordertopwidth:200},1000)     $('#theinnerdiv').animate({height:200},1000) </script> 

Comments

Popular posts from this blog

ios - Memory not freeing up after popping viewcontroller using ARC -

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

Why does Go error when trying to marshal this JSON? -