CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Adeel Hussain
Adeel Hussain

Reputation: 31

Animate div element to the right

I want to animate the div element to move to the right when the 'sign in' button is clicked.

I have managed to animate it to the right, however some of the element hangs off the browser window.

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();

});

This is what I want to achieve https://ibb.co/gmqZCkg

This is the problem I am getting (As you can see once the element is animated it hangs off the browser) https://ibb.co/WP4vHLj

Upvotes: 0

Views: 60

Answers (2)

I_Al-thamary
I_Al-thamary

Reputation: 3983

Try this:

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

Upvotes: 1

sam smith
sam smith

Reputation: 3

The amount your animating by (width) is the width of the body. You'll need to get the width of the #sign-in element instead.

Upvotes: 0

Related Questions