CODEWITHSUNDEEP
jqueryjquery-animate
StealthRT
StealthRT

Reputation: 10542

JQuery animate DIV and keep in center

I have the following code to demo of my form box that i would like to animate out:

http://jsfiddle.net/sv33r/1/

The JS code is:

$(".login-form").click(function() {
    $(".login-form").animate({width:500, height: 300});
    $(".footer").animate({width:430, height: 95});
});
​

HTML is:

<div id="wrapper">    
    <form name="login-form" class="login-form" action="" method="post">
    <div class="gradient"></div>
      <div class="header">
        <h1>Logo here</h1>
        <span>test</span></div>

        <div class="content">
            blah    
        </div>

      <div class="footer">
        <input type="button" name="submit" value="Click to test grow" class="register" />
        </div>    
    </form>
</div>​

Currently it just re-sizes without re-centering it on screen.

What do i need to add in order to do this?

Upvotes: 0

Views: 707

Answers (2)

edrian
edrian

Reputation: 4521

If you are using that #wrapper div, better apply animation to that element. Like this:

$("#wrapper").click(function() {
    $("#wrapper").animate({width:500, height: 300});
    $(".footer").animate({width:430, height: 95});
});

​ Then, in your css remove the following rule from ".login-container": 300px (you dont need this because you are defining this same width at "#wrapper" element)

Here is the example in fiddle

Upvotes: 2

RRcom Resty
RRcom Resty

Reputation: 99

change the css #wrapper width: 300px to min-width: 300px from

#wrapper {
    height: 400px;
    margin: 70px auto;
    width: 300px;
}

to

#wrapper {
    height: 400px;
    margin: 70px auto;
    min-width: 300px;
}

Upvotes: 1

Related Questions