CODEWITHSUNDEEP
javascriptjquery
Pyae Phyoe Shein
Pyae Phyoe Shein

Reputation: 13787

jQuery animate expand proportionally

I'm now in problem about how to animate function in jQuery to expand proportionally. Normally, it expand one-sided only just like expand to bottom or expand to right.

What I want is to expand proportionally left-right-top-bottom by using animate.

alt text

Following is my coding. What I said above, it expand to bottom only.

$(document).ready(function() {
    var theFrame = $("#FrmPatient", parent.document.body);
    theFrame.animate({width: 650, height: 485}, 1000);
});

Upvotes: 2

Views: 2030

Answers (2)

cheeaun
cheeaun

Reputation: 1343

Try this:

<div id="frame"></div>

#frame {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -100px;
    width: 200px;
    height: 200px;
    background-color: #999;
}

$(function() {
    var w = 400, h = 400;
    $("#frame").animate({
        width: w,
        height: w,
        marginLeft: -w/2,
        marginTop: -h/2
    }, 1000);
});

http://jsfiddle.net/GVj83/

Upvotes: 5

Oren Trutner
Oren Trutner

Reputation: 24208

You'll need to animate the left and top properties as well. If the original width and height of the box are (w0, h0) and the expanded ones are (w1, h1), animate left to left-(w1-w0)/2, and top to top-(h1-h0)/2. Note that would only work with absolute or relative positioning.

Upvotes: 1

Related Questions