使用jQuery动画和div的意外行为

Question

我会切入追逐，

基本上，当页面加载时，每侧的两小时线连接在一起并在中间相遇。当发生这种情况时，在中间形成一个圆圈，然后线条回到原来的宽度。

问题在于：当圆圈完全展开时，它会突然移出位置（向右），右边的线向上移动。

我一直在尝试使用position：absolute来解决这个问题，但这会开辟出新的蠕虫病毒。

有人可以帮我解决这个问题吗？

http://codepen.io/DocRow10/pen/JvrKb

哦，是的，我右边有一些随机的空白区域。我不知道那是什么，但也有人可以帮助我吗？

感谢。

<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-frame">
                        <div id="picture"></div>
                    </div>
                </div>
                <hr class="hidari" />


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

            <h1 id="page-header">About Me</h1>


                    </div>
                </div>

            </div>
        </div>
        <div class="clear"></div>
        <div id="footer">

            <p id="footer-text">
                &#169; 2016. All rights reserved.
            </p>
        </div>
    </div>



 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%;


}

#background {


}

h1#page-header {
    margin: 0;
    font-family: code;
    font-size: 45px;
    text-align: center;
    padding: 20px 0px;
}

/* ABOUT */

#pic-container {
    width: 100%;
    height: 180px;
    text-align: center;
    padding-top: 10px;
}

#relative {
    position: relative;
    display: inline-block;
    right: 97.5px;
}

#photo-frame {
    background-color: royalblue;
    position: absolute;
    width: 0px;
    height: 0px;
    border-radius: 100px;
    border-style: solid;
    border-color: beige;
    border-width: 0px;
    top: 90px;
    left: 90px;
    z-index: 2;
}

#photo-frame > #picture {
    width: 100%;
    height: 100%;
    background-image: url('test.png');
    border-radius: 100px;
}

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;
}

#intro {
    width: 70%;
    font-family: lato;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    font-size: 17px;
    line-height: 150%;
}

#expertise {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-bottom: 8px;
}

#expertise h1 {
    font-family: Arial;
    font-size: 25px;
}

#expertise h2 {
    font-family: sinkinsans;
    font-size: 18px;
    margin-top: 5px;
}

#expertise > #skills h2 {
    float: left;
}

#expertise h3 {
    font-family: sinkinsans;
    font-size: 14px;
    margin-top: -12.5px;
}

.company-header {
    font-family: sinkinsansbold;
}

#skills {
    width: 50%;
    overflow: auto;

}

.skill {
    display: inline-block;
    width: 100%;
}

/*-----SKILLS BAR-----*/

.bar {
    width: 300px;
    height: 35px;
    border: 2px solid black;
    border-radius: 10px;
    overflow: hidden;
    float: right;
}

.nil {
    background-image: url('footer_lodyas.png'); /* Background pattern from subtlepatterns.com */
    width: 100%;
    height: 100%;

    float: right;
    overflow: hidden;
}

.ability {
    width: 0%;
    height: 100%;
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, red , lime); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, red, lime); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, red, lime); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, red , lime); /* Standard syntax */
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 7.5px;
    border-top-left-radius: 7.5px; 
         /*  border-radius: 7.5px; */
}

/*--------------------*/
#experience {
    width: 50%;
}

.post {
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
}

#reference-point {
    width: 100%;
    height: 10%;
}

#how {
    display: inline-block;
    width: 100%;
}

#how > div {

    width: 42%;
    margin-left: auto;
    margin-right: auto;
}

#how h2 {
    font-family: sinkinsans;
    font-size: 18px;
}

#how > div > div {

}

#how p {
    font-family: lato;
    font-size: 15px;
    width: 55%;
    display: inline-block;
    position: relative;
    bottom: 4em;
}

#language-logos {
    height: 200px;
    width: 250px;
    display: inline-block;
    position: relative;
    left: 5%;
}
/*---------------------------------------------------------------*/

/* 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%;

    background-color: black;
}

#footer > p#footer-text {
    margin: 0;
    text-align: center;
    font-family: arial;
    color: rgb(169, 169, 169);
    padding: 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);
}

@font-face {
    font-family: sinkinsans;
    src: url(SinkinSans-400Regular.otf);
}

@font-face {
    font-family: sinkinsansbold;
    src: url(SinkinSans-500Medium.otf);
}

.clear {
    clear: both;
}

$("#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");
            });

            $("#picture").fadeOut();

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

            $("#photo-frame").delay(4000).animate(
                {
                    width: "180px",
                    height: "180px",
                    top: "-=90px",
                    left: "-=90px",
                    borderLeftWidth: "7.5px",
                    borderTopWidth: "7.5px",
                    borderRightWidth: "7.5px",
                    borderBottomWidth: "7.5px"
                }, "slow", function() {
                   $("hr").animate(
                        {
                            width: "0%"
                        }, 2700
                     );
                    $("#picture").fadeIn(2000);
                });

            $.fn.widthPerc = function(){
                var parent = this.parent();
                return ~~((this.width()/parent.width())*100)+"%";
            }

            var percentageIndex = 0;
            var percentageValues = ["100%", "100%", "86%", "79%", "45%"];
            var $starterZone = $("#reference-point").position().top - $(window).height();
            var checked = false;

            $(window).on('scroll', function () {
                if ($(window).scrollTop() > $starterZone && (checked == false)) {

                    $(".ability").each(function() {
                        $(this).delay(1000).animate({
                            width: percentageValues[percentageIndex]
                        }, 3000, function() {
                           var progressWidth = $(this).widthPerc();
                            if (progressWidth == "100%") {
                                $(this).css({'border-top-right-radius': '7.5px', 'border-bottom-right-radius': '7.5px'});
                            }


                        });
                        percentageIndex++;
                        checked = true;
                    });
                }
            });

Answer 1

box-sizing将解决这两个问题：

CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

  

指定元素的填充和边框应包含在元素的总宽度和高度中。

问题在于Chrome有hr元素的默认用户代理样式表，其中包含0.5em margin和1px border-width。使用这些属性和动画结尾处的width: 50%;，两个元素变得超过100％，因此它们分成两行。在Firefox中，情况并非如此，一切都很好。

右侧的空格问题是由#footer-text段引起的。它有width: 100%;和padding: 20px;，使其距视口宽40 px。

请注意，*选择器会将box-sizing应用于每个元素，这会破坏当前的一些设计。您可以将其更改为#footer-text, hr，以便页面的其余部分保持不变，但我建议将来使用此有用属性，因为它可以使您的工作更轻松。