I'm looking to achieve an effect as seen on the metalabs site's image changer/slider:

/

I got it working, but the catch is that I'm not using images, I'm scaling a div with content inside it. Dynamic content that's subject to change. Is there a way I can just blow up the whole div and its contents, because manually scaling each element inside the div is a huge hassle.

I'm currently scaling a div with a jQuery animation:

Starting css:

#tagBox {
    display: none;
    width: 1280px;
    height: 1000px;
    position: absolute !important;
    left: 50% !important;
    margin-left: -640px;
    top: 50% !important;
    margin-top: -500px;
    opacity: 0;
}

The jQuery that changes it.

$('#tagBox').show().animate({
    opacity: 1,
    width: 700,
    height: 500,
    marginLeft: '+=275px',
    marginTop: '+=250px'
}

But that only animated the div. The div's contents stay fixed in the upper right corner. I'm looking for a way to imitate the animation, but just scale the div as a whole, all elements together, preferably in normal javascript.

Thanks!

I'm looking to achieve an effect as seen on the metalabs site's image changer/slider:

http://metalabdesign./

I got it working, but the catch is that I'm not using images, I'm scaling a div with content inside it. Dynamic content that's subject to change. Is there a way I can just blow up the whole div and its contents, because manually scaling each element inside the div is a huge hassle.

I'm currently scaling a div with a jQuery animation:

Starting css:

#tagBox {
    display: none;
    width: 1280px;
    height: 1000px;
    position: absolute !important;
    left: 50% !important;
    margin-left: -640px;
    top: 50% !important;
    margin-top: -500px;
    opacity: 0;
}

The jQuery that changes it.

$('#tagBox').show().animate({
    opacity: 1,
    width: 700,
    height: 500,
    marginLeft: '+=275px',
    marginTop: '+=250px'
}

But that only animated the div. The div's contents stay fixed in the upper right corner. I'm looking for a way to imitate the animation, but just scale the div as a whole, all elements together, preferably in normal javascript.

Thanks!

• javascript
• jquery
• css
• jquery-ui
• scale

Share Improve this question Follow asked Jan 26, 2012 at 0:39 altalt 14k2121 gold badges8282 silver badges123123 bronze badges 2

• There are some CSS-properties that allow you to scale elements, take a look at stackoverflow./questions/7665406/resize-html-map-images/… . You may create a cssHook in jQuery for ease of use. – Dr.Molle Commented Jan 26, 2012 at 1:11
• I don't dabble much with animate() so I can't offer a proper answer; however, knowing CSS2 a bit (still learning CSS3 animations), you'll want to take inventory of the div's contents-- make sure padding, margins, etc., are being set with a measurement based on the parent (%?). This should theoretically take care of layout. I suspect you'd need a separate animate call for the text size; as long as the time interval is the same, animating font-size from X to zero at the same time as a div is animated in size from Y to zero should allow everything to scale. – Greg Pettit Commented Jan 26, 2012 at 1:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

you can use css3 transformations.

-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);

Check It - http://jsfiddle/6gJka/2/.