Javascript 向右设置div元素的动画

我想设置div元素的动画，使其在单击“登录”按钮时向右移动

我已经成功地将其设置为右侧动画，但是一些元素挂起在浏览器窗口上

HTML:

<section class="welcome">
        <div class="hero-container">
                <h1 id="welcome">Welcome!</h1>
                <p>Welcome back</p>
                <button id="sign-in">Sign in</button>
                <button id="sign-up">Sign up</button>
    </div>

    <div class="form">
        <form class="sign-in">
            <h1 id="signIn-heading">Sign In</h1>

            <input type="text" name="email" placeholder="Email">

            <input type="text" name="pass" placeholder="Password">

        </form>
    </div>

</section>

这就是我想要实现的目标

这就是我遇到的问题（正如您所看到的，一旦元素设置动画，它就会挂起浏览器）

---

设置动画的数量（宽度）是身体的宽度。您需要获取#sign-in元素的宽度。

试试以下方法：

$（“#登录”）。单击（函数（）{
//下面我正在检索身体的宽度
var$width=$（“body”）.width（）/2；
//将具有的实体指定给动画方法
$（“.hero container”）.animate（{“left”：$width}，“slow”）；
$（“#欢迎”）.html（“登录”）；
$（“.form”）.show（）；
});

欢迎
欢迎回来

登录
注册
登录
您是否也可以发布您的css代码，或者发布您正在使用的库，例如
引导
，或者附加一个代码片段，以便我们能够正确地重现问题？
$("#sign-in").click(function(){

//below I am retrieving the width of the body
var $width= $("body").width();

//assigning the body with to the animate method
$(".hero-container").animate({"left": $width}, "slow");

$("#welcome").html("Sign In");
$(".form").show();

});