Wie kann ich alle images nacheinander erreichen ?

  • Hallo,

    ich bin neu hier. Ich versuche, alle Bilder nacheinander zu aktivieren, aber erreiche nur, dass ich 2 Blöcke zu je 3 Bildern gleichzeitig habe.

    Ich habe schon alles probiert, aber es will nicht funktionieren. Kann mir bitte jemand einen Tip geben?



    <div class="container wayprop">

    <div class="row prop animated">

    <div class="col-md-4 animated" id="element-to-animate"><img class="img-responsive" src="/projects/ p1.jpg"></div>

    <div class="col-md-4 animated" id="element-to-animate"><img class="img-responsive" src=“/projects/p2.jpg"></div>

    <div class="col-md-4 animated" id="element-to-animate"><img class="img-responsive" src=“/projects/p3.jpg"></div>

    </div>


    <div class="row prop animated">

    <div class="col-md-4 animated" id="element-to-animate"><img class="img-responsive" src="/projects/p4.jpg"></div>

    <div class="col-md-4 animated" id="element-to-animate"><img class="img-responsive" src=" /projects/p5.jpg"></div>

    <div class="col-md-4 animated" id="element-to-animate"><img class="img-responsive" src=" /projects/p6.jpg"></div>

    </div>

    </div>



    $(document).ready(function(){


    // hide our element on page load


    $('.prop').each(function(index, element) {

    $(this).css({

    'opacity': 0

    });


    });



    $('.wayprop').waypoint(function() {

    $('.prop').each(function(k) {

    var el = $(this);

    setTimeout(function() {


    el.addClass('bounceIn');

    }, k * 1000);

    });

    }, {offset: '70%'});




    });

  • $('#element-to-animate').each(function(k) .......


    Wenn ich aber die ID vom Container eingebe, wo die images drinnen sind, funktioniert nichts.

    Der Code arbeitet nur, mit Bezug auf den Container <div class="row prop animated">


    Wo ist mein Denkfehler.....

  • Ich habe schon alles mögliche an Befehlen ausprobiert, kriege es aber einzeln nicht zum Laufen...

  • Erklär doch mal im Detail, was passieren soll, vielleicht gibt es einen anderen Weg.

    Falls Du ein Beispiel hast, wo Du sagst: So sollte es aussehen, würde ein Link evtl. auch weiterhelfen.

  • Habe das mal gerade getestet in codepen. Du brauchst ja nur die Css und eine Zeile Jquery( geht auch ohne jquery ) und schon kommt das bild mit bounce hinein. Ich versuche das mal gerade mit mehreren Bidern hintereinander,so wie du es wohl haben willst,oder sollen alle Bilder auf einmal erscheinenen? Dann brauchst du ja nur nee Klasse setzten. Sollen die hintereinander und kurz Zeit versetzt kommen muß man wohl nen kleinen timeout oder sowas einbauen. Ich versuche das mal gerade ob das so klappt wie ich mir das denke und wenn es klappt sage ich dir bescheid

  • Ein Bild ist kein Problem. Der Code funktioniert, aber wie gesagt nur im 2er Block zu je 3 Bilder.

    Ein setTimeout function habe ich auch drinnen. Die funktioniert auch, der 2te Block kommt

    verzögert ins Bild, aber ich bekomme es nicht hin, jedes Bild einzeln, nacheinander ins Bild zu bouncen.