Question

its my first time using .animate() from jQuery. My main idea is panel with picture will appear within 2 seconds, and sliding down. But currently its not working, can you make it work?

You can see demo here: http://jsfiddle.net/thisizmonster/8WN5c/3/

If you can’t see it, here is copied version.

HTML:

<div id="panel">
    <img src="http://fusedfilm.com/wp-content/uploads/2009/08/spider-man.jpg" alt="dummy image" />
</div>

CSS:

#panel {
    width: 200px;
    position: absolute;
    top: 0px;
    left: 0px; 
    height: 0px; 
}

JavaScript:

$("#panel").animate({
    height: 320,
    overflow: visible
}, 2000);

Answer 1

Maybe you meant something more like this:

http://jsfiddle.net/8WN5c/6/

This will actually slide the image down into place by moving the relative position of the image.

The “panel” in this case acts like a picture frame. The image can’t be seen when it’s outside the frame, and the image slides down into the frame.

HTML:

<div id="panel">
        <div id="slideDownPanel">
    <img src="http://fusedfilm.com/wp-content/uploads/2009/08/spider-man.jpg" alt="dummy image" />
        </div>
</div>

CSS:

body {background-color: #000}
#panel {
    width: 430px;
    height: 320px;
    position: absolute;
    top: 0px;
    left: 0px; 
}
#slideDownPanel
{
    width: 430px;
    height: 320px;
    position: relative;
    top: -320px;
}

JS:

$("#slideDownPanel").animate({
    top: 0
}, 2000);