How do your do this in JQuery

JavaScript
1

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?

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?

3

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.

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.

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 :slight_smile:

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.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            html, body, wrapper {
                margin: 0px 0px 0px 0px;
                padding: 0px 0px 0px 0px;
                height: 100%;
            }
            #cover {
                margin: 0px 0px 0px 0px;
                padding: 0px 0px 0px 0px;
                opacity: 100;
                filter:alpha(opacity=100);
                position: absolute;
                top: 0px;
                left: 0px;
                height: 100%;
                width: 100%;
                background-color: rgb(0,0,0);
            }
        </style>
        <script type="text/javascript">
            var speed = 0.1;
            var timer
            function showContent(){
                timer = setInterval(setOpacity,100);
            }
            function setOpacity() {
                ((coverO.curOpac -= speed) < 0)? 0 : coverO.curOpac;
                if(typeof(coverO.style.opacity) == 'string'){
                    coverO.style.opacity = coverO.curOpac/10;
                } else {
                    coverO.style.filter = 'alpha(opacity=' + coverO.curOpac*10 + ')';
                }
                if(coverO.curOpac == 0) {
                    clearInterval(timer);
                }
            }
            window.onload = function(){
                coverO = document.getElementById('cover');
                coverO.curOpac = 10;
                setTimeout(showContent,1500);
            }
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id="content">
                Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante
                turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc
                posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede
                voluptas libero, sed mauris tincidunt, ultrices praesent. Iaculis vivamus sapien id, lorem ante aliquet, commodo pede imperdiet
                congue, dictum integer eget sed orci. Suscipit vitae quis, massa elit faucibus massa, interdum nam pharetra nulla sed, sollicitudin
                egestas, magna viverra.
            </div>
            <div id="cover"></div>
        </div>
    </body>
</html>

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.

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.

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: 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 :slight_smile:

9

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

[COLOR=#000066][B]if[/B][/COLOR][COLOR=#009900]([/COLOR]coverO.[COLOR=#660066]curOpac[/COLOR] [COLOR=#339933]<[/COLOR] [COLOR=#CC0000]0[/COLOR][COLOR=#009900])[/COLOR]

should have been


[COLOR=#000066][B]if[/B][/COLOR][COLOR=#009900]([/COLOR]coverO.[COLOR=#660066]curOpac[/COLOR] [COLOR=#339933]==[/COLOR] [COLOR=#CC0000]0[/COLOR][COLOR=#009900])[/COLOR]

(the 30 mins grace we get to edit posts has expired :()

Edit:

Fixed it for you
– XTX

Off Topic:

@ScallioXTX

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 :slight_smile: