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; }

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; }

• javascript
• jquery
• slidedown

Share Improve this question Follow edited Aug 2, 2013 at 8:27 Dawn asked Aug 2, 2013 at 7:47 DawnDawn 3511 silver badge44 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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/bvjdz/3/ (I have increased the delays for animation be visible properly

I've created a fiddle from your code

http://jsfiddle/ctrJD/

You need to animate marginTop

Check this fiddle: http://jsfiddle/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.

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