Animation et Javascript

Bonsoir à tous,

Grâce à l'aide de certains d'entre vous, j'étais parvenu il y a quelques mois à modifier le plugin jQuery Raptorize Kit exactement comme je le souhaitais. Il s'agissait alors de faire venir à l'ouverture de la page une image pour qu'elle s'arrête et reste en place à un endroit défini. Voici le code (CSS et JavaScript) :

Code:

---

1 2 3 4 5 6 7

#foreground { position: fixed; right: -250px; top: -25px; display: block; z-index: 2; }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<img id="foreground" src="photos/foreground.png"> <audio id="son" preload="auto"> <source src="son.mp3"> <source src="son.ogg"> </audio>   <script> $(window).load(function(){ var foreground = $("#foreground"); if (!$.cookie('executed')) { var musique = $("#son").get(0);   musique.load(); // pour Chrome ! musique.play();   foreground.animate({"right" : "-250px"}, 500); $.cookie('executed', true); } else { foreground.css({"right" : "-250px"}); } }); </script>

---

Aujourd'hui, j'essaye en vain d'appliquer ce même code à un autre élément de ma page dont le CSS est le suivant :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.wrapper{ padding-top: 50px; margin:auto; background-size: cover;   } .content { padding-top: 200px; color: red; background-image: url(photos/parchemin.png); background-repeat: no-repeat; background-position: center; height: 962px; }

---

La class content est définie ainsi dans le .html

Code:

---

1 2 3 4 5 6 7 8 9

<section class="wrapper"> <div class="content"> <center><h1>ACCUEIL</h1></center></br> <h2><u>TITRE 2</u></h2> <p></p><br/>   <h3><i>TITRE 3</i></h3> </div> </section>

---

Ci-joint un screenshot du début de site. La partie content correspond au parchemin avec les titres dedans.

http://u.jimdo.com/www15/o/s349256f2.../std/image.jpg


Mon problème est que je ne sais pas adapter le Javascript à ce CSS. En effet, cette fois-ci il n'y a ni "right" ni "left", seulement des "auto" et des "padding". Ma question est donc la suivante : comment faire pour que la class "content" arrive de gauche à droite à l'ouverture de la page, et s'arrête au centre de la page avec des margin auto (autrement dit en responsive design, comme elle l'est actuellement) ?
Merci (beaucoup) par avance.