JQuery fondu avec boucle de retard et de

J'ai 2 Divs empilés les uns sur les autres.

J'ai besoin d'un très simple fonction:

a) Attendre 3 secondes, puis
b) FadeOut le haut de la Div à révéler le deuxième Div
c) Attendre 3 secondes, puis à nouveau
d) FadeIn haut Div nouveau
e) de la Boucle de retour de nouveau

Quelqu'un peut-il offrir des conseils?

Merci beaucoup

Le comportement est un peu flou: pour (b), voulez-vous que le haut de la div à s'estomper et la deuxième div fondu? et (d) la deuxième div fade out de nouveau?

OriginalL'auteur Martin | 2009-08-19

10

Voici une tentative.
```
function foo() {
    jQuery("#mydiv").animate({opacity: 1.0}, {duration: 3000})
        .animate({opacity: 0}, {duration: 3000})
        .animate({opacity: 0}, {duration: 3000})
        .animate({opacity: 1.0}, {duration: 3000, complete: foo})
}
```
Remarque: Pour mettre en pause, il suffit d'appeler animer sur une propriété avec la même valeur cible comme il est maintenant. La dernière animer appelle la même fonction que le rappel.

PS: Est-il provoquer un débordement de pile dans le temps?

la marque de ce que la bonne réponse!
Est-il de toute façon pour arrêter cette boucle une fois qu'il a commencé? Aimez, cliquez sur arrêter la boucle pour toujours?

OriginalL'auteur Chetan Sastry
2

si les deux divs les id de "id1" et "id2" et id2 est la partie supérieure, puis le code serait:
```
function fadeIn() {
  $("id2").animate({opacity:0},500);
  setTimeout(fadeOut,3500);
}

function fadeOut() {
  $("id2").animate({opacity:1},500);
  setTimeout(fadeIn,3500);
}

function startAnim() {
  setTimeout(fadeIn,3000);
}
```
startAnim() commence l'animation du cycle , vous devez appeler @ le début. Puis fadeIn & garder l'animation id2 et définition des délais d'attente pour les uns les autres. Le délai est de 3500 , comme vous le souhaitiez 3 secondes de retard (c'est à dire. 3000ms) et 500 pour l'animation précédente pour compléter. Cela aurait pu être fait à l'aide d'un rappel sur les animer , mais c'est plus salissant.

OriginalL'auteur aviraldg

Voici ce que vous cherchez pour (je pense). Il utilise un non-ordonnée-liste, mais vous pouvez l'activer pour les div ou il suffit de mettre votre div à l'intérieur de la liste des articles comme je l'ai fait ci-dessous.

Voici le jQuery...

$(document).ready(function() {

     var j = 0;
     var delay = 2000; //millisecond delay between cycles
     function cycleThru(){
             var jmax = $("ul#cyclelist li").length -1;
             $("ul#cyclelist li:eq(" + j + ")")
                     .animate({"opacity" : "1"} ,400)
                     .animate({"opacity" : "1"}, delay)
                     .animate({"opacity" : "0"}, 400, function(){
                             (j == jmax) ? j=0 : j++;
                             cycleThru();
                     });
             };

     cycleThru();

});

...et quelques css...

ul#cyclelist {width:200px;border:solid;position:relative;overflow:hidden;height:200px}
ul#cyclelist li {font-size:1.4em;padding:20px;opacity:0;position:absolute}

Vous avez déjà votre code HTML, mais dans le cas où vous avez besoin d'un exemple...

<ul id="cyclelist">
  <li><div>First Div</div></li>
  <li><div>Second Div</div></li>
  <li><div>Third Div</div></li>
</ul>

J'aimerais prendre le crédit pour cela, mais c'est directement à partir de CSS-Tricks http://css-tricks.com/snippets/jquery/cycle-through-a-list/

OriginalL'auteur Floyd

nul ne peut jamais voir cela, mais juste au cas où...

<script>
$(document).ready(function() {
       $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
       $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
});
</script>

c'est sans boucle....

Qui serait

<script>
$(document).ready(function() {
    function animate(){
        $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
        $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);    
    }
    animate();  
    setInterval(animate, 10000);
}); 
</script>

Tellement beau et simple, une ligne par élément qui doit être fondu en boucle. J'ai pu la main à la designer et expliqué aux numéros de changement de varier la décoloration, à nice.

OriginalL'auteur Nata2ha Mayan2

Cette tentative utilise un petit livre de recettes de la fonction d'attente de jquery.com.

La fonction doFading suppose l'id de haut div être "a4".

function doFading() {
      $("#a4").wait(3000)
      .fadeOut("slow")
      .wait(3000)
      .fadeIn("slow",doFading);
    }

$.fn.wait = function(time, type) {
        time = time || 1000;
        type = type || "fx";
        return this.queue(type, function() {
            var self = this;
            setTimeout(function() {
                $(self).dequeue();
            }, time);
        });
    };

OriginalL'auteur

SI vous souhaitez également avoir crossfade. Utilisation floyed du script, mais d'apporter les modifications que j'ai utilisé. Seul problème, c'est votre première image que vous souhaitez affichée devrait être la deuxième à la li éléments

$(document).ready(function() {

         var j = 0;
         var delay = 5000; //millisecond delay between cycles
         function cycleThru(){
                 var jmax = $("ul#cyclelist li").length -1;
                 $("ul#cyclelist li:eq(" + j + ")")
                         .animate({"opacity" : "1"} ,1000)
                         .animate({"opacity" : "1"}, delay);
             $("ul#cyclelist li:eq(" + j + ")").next().animate({"opacity" : "1"} ,1000);    
             $("ul#cyclelist li:eq(" + j + ")")
                         .animate({"opacity" : "0"}, 1000, function(){
                                 (j == jmax) ? j=0 : j--;
                                 cycleThru();
                         });
                 };

         cycleThru();

 });

OriginalL'auteur Damien Keitel

Je sais que c'est vieux, mais je pensais que je voudrais partager ce que j'ai fait pour accomplir cette

$(document).ready(function() {
    var delay = 500;
    $("#mydiv").bind('fadein', function()
    {
        $(this).fadeOut(1000, function()
        {
            $(this).delay(delay).trigger('fadeout');
        });
    });

    $("#mydiv").bind('fadeout', function()
    {
        $(this).fadeIn(1000, function()
        {
            $(this).delay(delay).trigger('fadein');
        });
    });

    $("#mydiv").fadeIn(1000, function()
    {
        $(this).trigger("fadein");
    });
});

ensuite appeler cette fonction lorsque vous souhaitez arrêter

$("#mydiv").stop().hide();

OriginalL'auteur ehftwelve

Vous devez vous connecter pour publier un commentaire.