Mon premier code jquery

neecride
Javascript

Bonsoir,

J'avais poster précédemment pour une animation css3 et j'ai changer de procédé pour une animation jquery qui fonctionne partout (faut bien apprendre un jour)...

J'ai placer mon slider nikel mai je voulais ajouté dessus un span et un h2 animé qu'il n'y avais pas avant voici le code :

<script>
// animation avec le style, la durée et la fonction de retour
$('span').animate({
bottom : '280px'
},1000,function(){
  ;
});
// animation avec le style, la durée et la fonction de retour
$('h2').animate({
marginTop : '200px'
},1000,function(){
  ;
});
    </script>

Bon ce n'est pas très long mai je n'arrive pas a faire en sorte que l'animation ce répète a chaque changement d'image du slide.
Je n'ai pas de lien a vous montré je travail sur wamp.

Donc voila je ne sais pas comment faire j'ai chercher mai pas trouver (ou alors mal chercher) donc si vous avez la fonction ce serai sympa merci.

3 réponses

Evotique

Qu'entends-tu par slider ? L'espère de boîte qui fait défiler des news ?
Si c'est ça, lances une fonction (par exemple animateSlide() { $('span').animat... }) lorsque ton slide change d'image. Si le slide est de toi, ça ne devrait pas être trop difficile mais si tu l'a trouvé sur internet, donnes nous le code qu'on puisse t'aider davantage ;)

neecride
Auteur

Le slider je l'ai eu ici : http://www.owlgraphic.com/owlcarousel/demos/one.html

Et ma div ici :

<div class="span12">
     <div id="owl-demo" class="owl-carousel">
           <div class="item"><span>BF4 et un très bon jeux</span><h2>Notre team recrute</h2><img src="themes/neec-bf4/assets/fullimage1.jpg" alt="BAttlefield 4"></div>
           <div class="item"><span>GTA 5</span><h2>text 2</h2><img src="themes/neec-bf4/assets/fullimage2.jpg" alt="GTA V"></div>
           <div class="item"><span>Mirror Edge</span><h2>text 2</h2><img src="themes/neec-bf4/assets/fullimage3.jpg" alt="Mirror Edge"></div>                       
           <div class="item"><span>The Last of us</span><h2>text 2</h2><img src="themes/neec-bf4/assets/fullimage4.jpg" alt="The Last of us"></div>
      </div>

Il n'y avais juste pas la fonction que j'ai ajouté et je voudrais que l'animation revienne au début a chaque changement de l'image.

J'ai mis le tous en ligne : http://www.team-rushkiller.fr/sitedetest

Evotique

Euh, essaies comme ça mais je promets rien :

var spanAnim = setInterval(function() {
    $('span').animate({bottom : '280px'});
    $('span').css('bottom', '0px');
}, 1000);
var h2Anim = setInterval(function() {
    $('h2').animate({marginTop : '200px'});
    $('h2').css('margin-top', '0px');
}, 1000);