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

根据（宽度）进行动画设置的数量就是主体的宽度。您需要获取＃sign-in元素的宽度。

右边的div元素动画

2 个答案: