jQuery: Mehrere Divs hintereinander einblenden

D

DiDiJo

Erfahrenes Mitglied
Hi Leute,

ich bastel gerade ein großes Homepagesystem um. Dort benutzen mehrere Homepages die gleichen Scripte ... unter anderem nutzen alle Homepages ein und dieselben jQuery.js Dateien.

Nun möchte ich eine Funktion bauen, die mir nacheinader die Homepage elemente einblendet. Eigentlich wäre es besser für jedes Layout eine eigene Einblendfunktion zu bauen (um auf Sonderfälle einzugehen) aber da ic hsowas in Zukunft so ode rso nochmal brauche, möchte ich es im Ersten schritt direkt für alle Layouts machen.

Am liebsten würde ich folgende Funktion haben : "blendeElemnteEin(array,speed)". In dem Paramter Array (oder String --> IDs mit Komma getrennt) sollen hintereinader die HTML-IDs stehen die eingelendet werden sollen und in speed steht die Anzahl der Millisekunden.

Wie ich mehrere LIs in einer Liste hintereinader einblenden lasse weiß ich ... aber eine beliebige Liste an Elementen ... da bin ich etwas überfragt. Kann mir da vlt wer von euch helfen ?

mfg


Aus sowas:
Code: 
$("#box1").fadeIn("slow", function(){

  $("#box2").fadeIn("slow", function(){

    $("#box3").fadeIn("slow", function(){

      $("#box4").fadeIn("slow", function(){

        $("#box5").fadeIn("slow");

      });

     });

   });

});

soltle eine evtl. ein oder 2zeilige funktio entstehen die mir nacheinader alles abarbeitet ...



Sowas in der Art hatte ich mir vorgestellt ... aber da kann ich auch keine Reihenfolge vorgeben und ich bin auf bestimmte IDs angewiesen und müsste ggf die CSS von zig Seiten umbauen:
Code: 
$(function() {
   var $sequence = $('div[id$=_div]').hide(), div = 0;
   (function(){
       $($sequence[div++]).fadeIn('slow', arguments.callee);
   })();
});
Daniel
 
Zuletzt bearbeitet:
Hi,

ein ähnliches Thema hatten wir erst gestern. Ist zwar für Prototype, sollte jedoch für jQuery nicht schwerer sein:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
function fnFx(arrIDs){
  $("#"+arrIDs[0]).fadeIn("slow", function(){
    fnFx($.map(
     arrIDs,
      function(elementOfArray, indexInArray){
        return ((indexInArray==0)? null: elementOfArray);
      })
    );
  });
}

$(function(){
  fnFx(['outputId1', 'outputId2', 'outputId3']);
})
 //-->
</script>
</head>
<body>
<div id="outputId1" style="display: none;">1</div>
<div id="outputId2" style="display: none;">2</div>
<div id="outputId3" style="display: none;">3</div>
</body>
</html>

Ciao
Quaese
 
Kurze Frage noch ... kann man dieses Script so umbauen, dass ich dahinter noch eine Callback Funktion ausführen kann. Also nachdem alle Elemente eingeblendet wurden führe die ü+bergebene Funktion aus
 
Hi,

du kannst die Funktion um einen weiteren Parameter in der Parameterliste erweitern. Dieser nimmt die callback-Funktion auf.

Innerhalb der Funktion prüfst du, ob das ID-Array noch Elemente enthält. Ist es noch nicht leer, wird weiterhin gefadet, im anderen Fall wird die callback-Funktion ausgeführt.

Beispiel:
Code: 
function fnFx(arrIDs, fnCallback){
  if(arrIDs.length > 0){
    $("#"+arrIDs[0]).fadeIn("slow", function(){
      fnFx(
        $.map(
          arrIDs,
          function(elementOfArray, indexInArray){
            return ((indexInArray==0)? null: elementOfArray);
          }
        ),
        fnCallback
      );
    });
  }else{
    fnCallback();
  }
}

$(function(){
  fnFx(['outputId1', 'outputId2', 'outputId3'], function(){ alert("Geschafft");});
})

Ciao
Quaese
 
cool ... das werde ich gleich mal einbauen ... kann man dieser funktion nun auch die art der animation übergeben. Wenn sowas nicht funktioniert müsste ich mir ja im schlimmsten fall eine funktion zum einfadden, zum ausfaden [...] etc bauen.

ich krieg übrigens jetzt nen Fehler:
"uncaught exception: Syntax error, unrecognized expression: #"

bei folgendem Aufruf
Code: 
var elem1 = new Array('#head','#logo','#HeadRight','#seoleiste','#main','#left','#suche','#news_block');
fadeInElements(elem1,speed);

// oder 

fadeInElements(elem1,speed,function(){
		alert("fertig");
	});

aber der fehler bleibt imemr der gleiche
 
Hi,

du musst die IDs ohne Doppelraute übergeben.

Wenn die Animationsfunktion übergeben werden soll, könnte das über einen String (fadeIn oder fadeOut) in einem weiteren Argument erfolgen.

Beispiel:
Code: 
function fnFx(arrIDs, strAnimFn, fnCallback){
  if(arrIDs.length > 0){
    $("#"+arrIDs[0])[strAnimFn]("slow", function(){
      fnFx(
        $.map(
          arrIDs,
          function(elementOfArray, indexInArray){
            return ((indexInArray==0)? null: elementOfArray);
          }
        ),
        strAnimFn,
        fnCallback
      );
    });
  }else{
    fnCallback();
  }
}

$(function(){
  fnFx(['outputId1', 'outputId2', 'outputId3'], 'fadeIn', function(){ alert("Geschafft");});
})

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück