I know how to shrink a box in JQuery but wondered if it is possible to shrink a box (or div) from fullscreen size to an absolute pixel size?

sdleihssirhc
—
2011-11-16T19:00:57Z —
#2

When you say "shrink", do you mean "change the width and height," or do you actually want to shrink it, so that the contents retain their proportions?

What have you tried so far?

Hlforr
—
2011-11-16T19:40:54Z —
#3

sdleihssirhc said:

When you say "shrink", do you mean "change the width and height," or do you actually want to shrink it, so that the contents retain their proportions?

What have you tried so far?

I want a logo on a black background to display when the user first goes to a homepage with the black background covering the whole screen. Then I want the logo to gradually shrink to about 300px wide by 120px high and for the black background to dissapear revealing the page content underneath.

I thought the only way to do this was to create a massive black background image with a logo in the middle, but being a JQuery newbie, I realise that this might not be the best way.

sdleihssirhc
—
2011-11-16T19:45:08Z —
#4

jQuery has some animation functions that you'll probably want to look into. The two that seem most pertinent here are "animate" and "fadeOut". (Feel free to keep asking questions if you can't get something to work.)

If I were doing this, I'd have two different elements: An empty <div> for the black background, and an <img> for the logo.

Hlforr
—
2011-11-16T19:56:50Z —
#5

Thanks, I'll check out the link. I think you are right, two elements would probably be the best way as I can shrink the black background to zero while the logo shrinks to its final size. I'll have a go but I may be back as this is all new ground

system
—
2011-11-16T23:09:30Z —
#6

If you want to fully customise your own animation without jQuery, maybe this code might help you get started.

I'm not sure if you want the black "cover" div to fade out or shrink with the logo. In this code, 1.5 secs after page load the black cover slowly fades out to reveal the page content underneath it.

I haven't added the logo animation, but it will follow a similar principle - instead of adjusting opacity, you would adjust the width and height properties.

Hlforr
—
2011-11-16T23:22:05Z —
#7

Wow, that's exactly what I am looking for. I can create another div for the logo and shrink this at the same time. Thanks for this. I reckon I can get the effect I need on the web page now between the answers to this thread and what I've picked up from what I have read so far in the Sitepoint JQuery book.

ScallioXTX
—
2011-11-16T23:22:12Z —
#8

Off Topic:

Instead of margin: 0px 0px 0px 0px and padding: 0px 0px 0px 0px you can also use margin: 0 and padding: 0. Works in all browsers. There also is margin: ab, which is the same as margin: abab, and there is margin: abc, which is the same as margin: abcb

system
—
2011-11-16T23:37:34Z —
#9

Hlforr said:

....I can create another div for the logo and shrink this at the same time. .....

or, as another option, you could put the shrinking of the logo in a separate timer and so control the fading out of the black cover and shrinking of the logo independently of each other.

If you need more help, post the code you have at the time and we can try to help.

[edit]not that it really matters much because it doesn't affect the fading, but