jQuery: Mehrere Divs hintereinander einblenden @ tutorials.de: Tutorials, Forum & Hilfe

DiDiJo · 15.07.10 17:24

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

**Quaese** · 15.07.10 22:24

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

DiDiJo · 16.07.10 11:12

Astrein ... das funktioniert Super

Vielen Dank

DiDiJo · 16.07.10 15:35

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

**Quaese** · 16.07.10 16:52

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

DiDiJo · 16.07.10 17:12

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

**Quaese** · 16.07.10 20:31

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, [B]strAnimFn[/B], fnCallback){
  if(arrIDs.length > 0){
    $("#"+arrIDs[0])[B][strAnimFn][/B]("slow", function(){
      fnFx(
        $.map(
          arrIDs,
          function(elementOfArray, indexInArray){
            return ((indexInArray==0)? null: elementOfArray);
          }
        ),
        [B]strAnimFn,[/B]
        fnCallback
      );
    });
  }else{
    fnCallback();
  }
}
 
$(function(){
  fnFx(['outputId1', 'outputId2', 'outputId3'], [B]'fadeIn'[/B], function(){ alert("Geschafft");});
})

Ciao
Quaese

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

[jQuery] Drag mehrere Divs

Mehrere Divs mit JQuery ein und ausklappen

mehrere divs hintereinander

mehrere Formulare hintereinander

Mehrere sql-Befehle hintereinander

E-Mail:

Abonnieren Abbestellen