向右动画div元素

Question

我想动画的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>

jQuery：

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

});

这就是我想要实现的https://ibb.co/gmqZCkg 这就是我遇到的问题(您可以看到，一旦元素被动画化，它就挂在浏览器上) https://ibb.co/WP4vHLj

Answer 1

试试这个：

​

$("#sign-in").click(function(){

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

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

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

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

​

Answer 2

你的动画量(宽度)是身体的宽度。您将需要获得#登录元素的宽度。