Javascript - Div/Image Slide down from the top

Question

I've been trying to simply make a picture slide down from the top (outside of the div) to the position it's supposed to be. I've found some other people asking for something similar but so far nothing worked for me. What am I supposed to do to make it work? (Yes I'm just starting with using Javascript) I'm using JQuery and this is my Javascript code:

$(document).ready(function(){

function slide(){
    $(".head").delay(100).animate({"top":"400px"},500);}
});

It's supposed to make the picture in this div move.

<div id="content">
    <img src="img/contact_header.png" alt="headerContact" class="head" /><br />
    <p> Text here </p>
</div> 

The div and the class have the following CSS settings

#content {
    width: 800px;
    padding: 0 0 40px 0; 
    margin-left: 100px;
    margin-top: 160px;
    background-color: #FFF;
    float: left;
}

.head { top: -200px; }

Answer 1

Check this fiddle: http://jsfiddle.net/j9rBz/1/

You have to specify position:relative to the wrapper div, and position:absolute to the image.

Also, keep the image hidden with display:none and opacity:0. Before animating starts you show() the image and then specify opacity:1 as part of the animation.

Answer 2

Couple of things wrong with your code :

1. Your <img> doesn't have a closing tag (/>).

   <img src="img/contact_header.png" alt="headerContact" class="head" />

2. You have declared the slide() function, but are not calling it :

   $(document).ready(function(){

   function slide(){
       $(".head").delay(100).animate({
           "top":"400px"
       },500);
   }
   slide(); //<- calling the function
   

   });

3. Your <img> should have position:absolute; and its parent i.e. #content should have position:relative; for the top positioning to work.

Here's a working example : http://jsfiddle.net/bvjdz/3/ (I have increased the delays for animation be visible properly

Answer 3

I've created a fiddle from your code

http://jsfiddle.net/ctrJD/

You need to animate marginTop

Answer 4

set position:relative on your content div and position: absolute on your img. That should get you to a point you can work the rest out to get it how you want, if my assumption of the problem is correct