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?
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 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.
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.
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
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.
Last edited by ScallioXTX; Nov 17, 2011 at 01:10. Reason: see post #9
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.
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: a b, which is the same as margin: a b a b, and there is margin: a b c, which is the same as margin: a b c b
Rémon - Hosting Advisor
Minimal Bookmarks Tree
My Google Chrome extension: browsing bookmarks made easy
If you need more help, post the code you have at the time and we can try to help.
not that it really matters much because it doesn't affect the fading, but
should have beenCode:if(coverO.curOpac < 0)
(the 30 mins grace we get to edit posts has expired )Code:if(coverO.curOpac == 0)
Fixed it for you
yep, that's right and many use the "shorter" versions. It's just my preference to specify margin and padding for all 4 sides for clarity reasons only
Last edited by ScallioXTX; Nov 17, 2011 at 01:13. Reason: added comment