Fading Text Auf eine Jquery Slider

Mein problem ist Folgendes: ich brauche, um einen JQuery Image-slider, der etwa ein flash-video. Ich habe bisher erfolgreich, wie ich den regler geht, aber ich kann nicht den text. Ich brauche den text zu fade-in, nachdem das Bild zeigt, ähnlich, wie es auf dieser Seite http://absolutetileandstone.com/ . Ich habe versucht, fast alles, was ich mir vorstellen kann, inklusive .animieren() und .fadeIn (), aber nirgends bekommen. Ich habe auch noch 2 regler zusammen und versuchte zu synchronisieren, das timing, das war unmöglich... Irgendwelche Vorschläge?

Hier ist die demo, die hat einen slider in einen Schieberegler http://www.trileafweb.com/absolute

  • Post eine demo des Schiebereglers.
  • Können Sie zeigen einige code? 🙂
  • Die meisten jQuery-Schieberegler haben eine Art von "übergang fertig" - Rückruf. Binden Sie ein fadeIn() in dass auf den text, den Sie möchten, zu verblassen.
InformationsquelleAutor Brandon North | 2011-07-12
  1. 1

    Hmm.. wie wärs mit nochmal den regler, da das plugin nicht nativ machen den text verblassen.

    demo: http://jsfiddle.net/LQgw4/

    html

    <div id="container">
    <div>
        <span class="one">absolute</span>
        <span class="two">hauuu~</span>
        <img src="http://lorempixum.com/250/200/abstract/1" />
    </div>
    <div>
        <span class="one">absolute</span>
        <span class="two">uguu~</span>
        <img src="http://lorempixum.com/250/200/abstract/2" />
    </div>
    <div>
        <span class="one">absolute</span>
        <span class="two">kyaa~</span>
        <img src="http://lorempixum.com/250/200/abstract/3" />
    </div>
    <div>
        <span class="one">blerg</span>
        <span class="two">abalone</span>
        <img src="http://lorempixum.com/250/200/abstract/4" />
    </div>
</div>

    css

    #container img,
#container span {
    display:none;   
}

#container span.one,
#container span.two {
    color:#fff;
    font:bold 30px verdana;
    position:absolute;
    left:30px;
    top:90px;
}

#container span.two {
    left:130px;
    top:120px;
    font-size:20px; 
}

    jquery

    $(document).ready(function() {
    startSlider(0);
});

function startSlider(idx) {
    $img = $("#container div img").eq(idx);
    $span1 = $("#container div span.one").eq(idx);
    $span2 = $("#container div span.two").eq(idx);

    $img.fadeIn('slow', function() {
        $span1.delay(600).fadeIn('slow', function() {
            $span2.delay(600).fadeIn('slow', function() {
                $span1.delay(600).fadeOut();
                $span2.delay(600).fadeOut('fast', function() {
                    $img.fadeOut('slow', function() {
                        if ($("#container div img").length - 1 == idx) {
                            startSlider(0);
                        }
                        else {
                            startSlider(idx + 1);
                        }
                    });
                });
            });
        });
    });
}

    oder wenn Sie möchten, dass der erste text nicht ausblenden: http://jsfiddle.net/azzWZ/

    • Lebensretter, vielen Dank.
    InformationsquelleAutor kei
Schreibe einen Kommentar