Make circle bigger from centre with jQuery animate

Question

I'm working on a portfolio website and there is some functionality that I need help with.

On my 'About' page, two lines from each side join together. What I'm trying to do is form the circle in the centre of the page, when those two lines meet. Instead, what happens is it forms from the top left, then into the centre.

Could you guys show me how to do this?

EDIT: Check this page: http://jadlimcaco.com/about/

See how this guy'd div animates from the centre? I would like a similar effect.

$(document).ready(function() {
  $("#main-links li").on('mouseenter', function() {

    $(this).animate({
      borderBottomColor: "rgb(0, 154, 205)"
    }, "200");
  });

  $("#main-links li").on('mouseleave', function() {

    $(this).animate({
      borderBottomColor: "rgb(238, 0, 0)"
    }, "200");
  });

  $("hr").delay(800).animate({
    width: "50%"
  }, {
    easing: "swing",
    duration: 3200
  });

  $("#photo").delay(4000).animate({
    width: "180px",
    height: "180px"
  });

  $("#relative").delay(4000).animate({
    right: "97.5px"
  });

});

    body {
      margin: 0;
    }
    #nav-bar {
      width: 100%;
      height: 50px;
      background-color: rgb(40, 40, 40);
      border-bottom-style: solid;
      border-bottom-color: rgb(238, 0, 0);
      border-bottom-width: 7.5px;
      padding-top: 14px
    }
    #logo {
      position: relative;
      bottom: 5px;
      font-size: 30px;
      padding-left: 8px;
      float: left;
      font-family: bebas;
    }
    #word-1 {
      color: rgb(0, 154, 205);
    }
    #word-2 {
      color: rgb(255, 250, 250);
    }
    ul#main-links {
      list-style: none;
      margin: 0;
      padding-right: 50px;
      float: right;
      height: 100%;
      border-bottom: 7.5px solid transparent;
      display: block;
      font-size: 0;
    }
    ul#main-links li {
      display: inline-block;
      text-align: center;
      border-bottom-style: solid;
      border-bottom-width: 7.5px;
      border-bottom-color: rgb(238, 0, 0);
      color: white;
      font-family: arcon;
      font-size: 18px;
      height: 100%;
      width: 90px;
      position: relative;
      z-index: 2;
    }
    a:link {
      text-decoration: none;
    }
    a:visited {
      text-decoration: none;
      color: white;
    }
    a:active {
      text-decoration: none;
      color: white;
    }
    a#logo-link {
      text-decoration: none;
    }
    a#logo-link:visited {
      text-decoration: none;
      color: inherit;
    }
    a#logo-link:active {
      text-decoration: none;
      color: inherit;
    }
    ul#main-links > a > li > span.word-position {
      position: relative;
      top: 5px;
    }
    #main-content {
      background-color: rgb(131, 111, 255);
      width: 100%;
      height: 80%;
    }
    #background {} h1#page-header {
      margin: 0;
      font-family: code;
      font-size: 45px;
      text-align: center;
      padding: 5px 0px;
    }
    /* ABOUT */
    #pic-container {
      width: 100%;
      height: 180px;
      text-align: center;
      padding-top: 10px;
    }
    #relative {
      position: relative;
      display: inline-block;
      right: 97.5px;
    }
    #photo {
      background-color: royalblue;
      position: absolute;
      width: 0px;
      height: 0px;
      border-radius: 100px;
      border-style: solid;
      border-color: beige;
      border-width: 7.5px;
    }
    hr {
      position: relative;
      top: 97.5px;
      margin: 0;
      border-style: solid;
      border-color: black;
      overflow: hidden;
      height 2px;
      background-color: black;
    }
    .hidari {
      float: left;
    }
    .migi {
      float: right;
    }
    .clear {
      clear: both;
    }
    /*---------------------------------------------------------------*/
    /* CONTACT */
    #contact-info {
      margin-left: auto;
      margin-right: auto;
      width: 80%;
      height: 80%;
    }
    #contact-info td {
      margin-left: auto;
      margin-right: auto;
      width: 50%;
    }
    #contact-info td > p {
      text-align: justify;
      font-family: lato;
      width: 80%;
    }
    .spacer {
      padding: 10px 0px;
    }
    #message-div {
      height: 150px;
    }
    input[type="text"] {
      width: 100%;
      height: 27px;
      padding-left: 5px;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 15px;
    }
    input[type="text"]:hover,
    #recipient-message:hover {
      border-width: 1.5px;
      border-style: solid;
      border-color: rgb(152, 245, 255);
    }
    input[type="button"] {
      float: right;
      margin-top: 7.5px;
      background-color: rgb(72, 118, 215);
      border-color: rgb(72, 118, 215);
      border-radius: 5px;
      font-size: 15px;
      color: rgb(230, 230, 255);
      font-family: Tahoma;
    }
    label {
      font-family: lato;
      font-size: 18px;
    }
    #recipient-message {
      width: 100%;
      height: 100%;
      resize: none;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12.5px;
    }
    .form-confirmation {
      width: 80%;
      border-style: solid;
      border-width: 2.5px;
      border-radius: 5px;
      border-color: rgb(0, 0, 0);
    }
    .invalid-field {
      box-shadow: 0 0 23px red;
      -webkit-box-shadow: 0 0 23px red;
      -moz-box-shadow: 0 0 23px red;
    }
    #success {
      background-color: rgb(0, 210, 0);
      color: rgb(245, 255, 250);
    }
    #failure {
      background-color: rgb(255, 48, 48);
      color: rgb(137, 0, 0);
    }
    .form-confirmation > p {
      text-align: center;
      font-family: codee;
      font-size: 18px;
    }
    #footer {
      width: 100%;
      height: 10%;
      background-color: black;
    }
    #footer > p#footer-text {
      margin: 0;
      text-align: center;
      font-family: arial;
      color: rgb(169, 169, 169);
      padding-top: 20px;
      width: 100%;
    }
    @font-face {
      font-family: arcon;
      src: url(Arcon-Regular.otf);
    }
    @font-face {
      font-family: bebas;
      src: url(BEBAS___.ttf);
    }
    @font-face {
      font-family: bubblegum;
      src: url(BubblegumSans-Regular.otf);
    }
    @font-face {
      font-family: code;
      src: url(Days.otf);
    }
    @font-face {
      font-family: lato;
      src: url(Lato-Regular.ttf);
    }
    @font-face {
      font-family: codee;
      src: url(CODE_Bold.otf);
    }
    .clear {
      clear: both;
    }

HTML

<html>

<head>
  <title>About | Potential Beginning</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
    libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
</head>

<body>
  <div id="container">
    <div id="nav-bar">
      <div id="logo"><a id="logo-link" href="index.html"><span id="word-1">Potential </span><span id="word-2">Beginning</span></a>
      </div>
      <ul id="main-links">
        <a href="about.html">
          <li><span class="word-position">About</span>
          </li>
        </a>
        <a href="work.html">
          <li><span class="word-position">Work</span>
          </li>
        </a>
        <a class href="contact.php">
          <li><span class="word-position">Contact</span>
          </li>
        </a>
      </ul>
    </div>
    <div id="main-content">
      <div id="pic-container">
        <div id="relative">
          <div id="photo"></div>
        </div>
        <hr class="hidari" />


        <hr class="migi" />
      </div>

      <h1 id="page-header">About Me</h1>
    </div>
    <span class="clear"></span>
    <div id="footer">

      <p id="footer-text">

      </p>
    </div>
  </div>
</body>
</html>

If you need any more information, let me know.

Answer 1

In order to make #photo appear to animate from it's center, you can animate the top and left properties as well. You will need to decrease the top and left by half the amount that height and width change:

$("#photo").delay(4000).animate({
    width: "180px",
    height: "180px",
    left: "-=90px",
    top:"-=90px"
});

Here's a working fiddle that models the effect: https://jsfiddle.net/rthybguf/