✔ jQuery: Animation in Schleife und Slide-Effekt

mschlegel

mschlegel

Erfahrenes Mitglied
Hallo miteinander

Meine Javascript-Kenntnisse sind immer noch (seit dem letzten Post) beschränkt, weshalb ich auf Bibliotheken wie jQuery ausweiche. Ich beschreibe mal kurz was ich benötige und wie ich es bis jetzt gelöst habe.

Ich habe einen Container der meherere Divs enthällt, wobei nur der erste sichbar ist. Bei einem klick auf next soll der aktuelle Div nach link verschwinden und der nächste von rechts hereinkommen. Jeder dieser Divs enthällt mehrere Bilder nach dem Schema, spricht, das erste ist sichtbar, die anderen nicht. Diese sollen in einer Endlosschleife mittels fading ausgetauscht werden.

Was ich bis jetzt habe, ist das Austauschen des Divs, allerdings nur mittels fadeOut und fadeIn (für slide gibts nur Up und Down, aber kein Left/Right). Das Austauschen der Bilder in der Schleife bekomme ich nicht hin, insbesondere scheint es keinen wirklichen Timer zu geben.

Wegender Performance und damit keine unsichtbaren Elemente bearbeitet werden dachte ich mir es wäre sinnvoll eine Funktion folgendermaßen aufzubauen.
Javascript: 
/* Bei klick auf next des Divs wird diese Funktion ausgelöst */
function tueEtwas(){
   deaktiviere Bildanimation des sichtbaren Divs;
   übergang zum nächsten Div (mittels slideLeft/Right)
   aktiviere Bildanimation des neuen Divs
}

Also, das Grundgerüst steht schon und funktioniert wie gesagt...aber etwas Hilfe brauch ich dann doch und wäre sehr dankbar wenn mir jemand helfen könnte.
 
Super, danke

Vielleicht kann ich ja das innerfade auch fürs sliden verwenden...hab beim Überfliegen einen "animationtype: slide" gesehen.
 
Hallo,

ich habe mir diese slideshow rauskopiert und will es in meine Webseite einfügen:
http://nettuts.s3.amazonaws.com/114_psdToHTML/newThemeForestProject/index.html

Und zwar habe ich mir das erstmal ganz einfach einzeln in eine nahezu leer HTML eingefügt:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>featuring slideshow</title>
    
    <link href="default.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
    <script src="js/jquery.innerfade.js" type="text/javascript"></script>
    <script src="js/scripts.js" type="text/javascript"></script>
</head>

<body>
            <div id="featured">
                <img src="images/featuredImages/teas_1.jpg" alt="web design" id="featuredImage" />
                <img src="images/featuredImages/teas_2.jpg" alt="video" id="Img1" />
                <img src="images/featuredImages/teas_3.jpg" alt="medien" id="Img2" />
            </div><!-- end featured-->
</body>
</html>

Wenn ich bei meiner "Sparvariante" jedoch kurz mal Javascript ausschalte, erscheinen alle Bilder auf einmal unter einander aufgereit.
Bei der Original-Tutorial-Variante passiert das nicht, da bleibts dann wenigstens einfach nur bei einem Bild stehen.

Kann jemand erkennen worans liegt,..also was macht bei der Original-Tutorial-Variante, dass ohne Javascript nicht alle Bilder aufeinmal dastehen?
Eigentlich ist doch bei mir alles so, wie beim Original...nur dass eben das div#featured allein steht.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück