Javascript - Div/Image Glisser par le haut

Question

J'ai essayé de faire simplement glisser une photo du haut (à l'extérieur de la div) vers la position qu'elle est supposée être. J'ai trouvé d'autres personnes qui demandaient quelque chose de similaire mais jusqu'ici rien n'a fonctionné pour moi. Que suis-je censé faire pour le faire fonctionner? (Oui, je viens juste de commencer avec l'utilisation de Javascript) J'utilise JQuery et voici mon code Javascript:

$(document).ready(function(){ 

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

Il est censé rendre l'image dans ce mouvement div.

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

La div et la classe ont les paramètres CSS suivants

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

.head { top: -200px; } 

Answer 1

Vérifiez ce violon: http://jsfiddle.net/j9rBz/1/

vous devez spécifier position:relative à l'emballage div et position:absolute au ima ge. En outre, gardez l'image cachée avec display:none et opacity:0. Avant d'animer, commencez l'image et spécifiez opacity:1 dans le cadre de l'animation.

Answer 2

mis position:relative sur votre div contenu et position: absolute sur votre img. Cela devrait vous rendre à un point que vous pouvez travailler le reste dehors pour obtenir ce que vous voulez, si mon hypothèse du problème est correct

Answer 3

J'ai créé un violon à partir de votre code

http://jsfiddle.net/ctrJD/

vous devez animer marginTop

Answer 4

Couple de mauvaises choses avec votre code:

1. Votre <img> n'a pas de balise de fermeture (/>).

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

2. Vous avez déclaré la fonction slide(), mais ne sont pas l'appeler:

   $(document).ready(function(){

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

   });

3. Votre <img> devrait avoir position:absolute; et son parent à savoir #content doit avoir position:relative; pour que le positionnement supérieur fonctionne.

Voici un exemple de travail. http://jsfiddle.net/bvjdz/3/ (j'ai augmenté les délais pour l'animation visible correctement