JQuery fondu avec boucle et délai

Question

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

je besoin d'une fonction très simple qui:

a) Attendez 3 secondes, puis b) fadeOut haut Div pour révéler la deuxième division c) Attendre 3 secondes puis d) FadeIn haut Div nouveau e) boucle à nouveau

quelqu'un peut-il offrir des conseils?

Un grand merci

Answer 1

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, appelez simplement animer sur une propriété avec la même valeur cible que maintenant. Le dernier animateur appelle la même fonction que le rappel. PS: provoque-t-il un débordement de pile dans le temps?

Answer 2

si les deux divs ont ids de "ID1" et "ID2" et ID2 est le supérieur alors le code serait comme:

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 la cycle d'animation, que vous devriez appeler @ le début. Puis fadeIn & Out continue d'animer id2 et de définir des délais d'attente pour l'autre. Le délai est de 3500, car vous vouliez 3 secondes de retard (soit 3000ms) et 500 pour compléter l'animation précédente. Cela aurait pu être fait en utilisant un rappel sur animer, mais c'est plus désordonné.

Answer 3

Cette tentative utilise une petite fonction de livre de recettes attendue par jquery.com.

La fonction doFading suppose que l'identifiant de la div supérieure est "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); 
     }); 
    }; 

Answer 4

Voici ce que vous cherchez (je pense). Il utilise une liste non-ordonnée, mais vous pouvez le changer pour div ou simplement mettre votre div à l'intérieur des éléments de la liste 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 ... à partir 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 il est tout droit de CSS-Tricks http://css-tricks.com/snippets/jquery/cycle-through-a-list/

Answer 5

SI vous voulez aussi l'avoir xfade. Utilisez le script de floyed mais faites les changements que j'ai utilisés.Le seul problème est votre première image que vous souhaitez afficher devrait être le second dans les éléments li

$(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(); 

}); 

Answer 6

Je sais que c'est vieux, mais je pensais que je voudrais partager ce que je l'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"); 
    }); 
}); 

puis appelez quand vous voulez arrêter

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

Answer 7

ne peut jamais voir, 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> 

cela est sans boucle il si ....

Ce 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>