Ich bin irgendwie mit diesem kleinen Teil festgefahren und kann mit meinem Projekt nicht weitermachen. Grundsätzlich versuche ich, zwischen zwei Divs mit derselben Klasse zu fadeIn / fadeOut, aber die Funktion so kurz wie möglich zu halten.

Ich habe folgendes gemacht, aber anscheinend wird es nur funktionieren, wenn beide Divs im Betteln versteckt sind und ich beim Laden den Standardtitel (erstes Div) anzeigen muss und nach 2 Sekunden möchte ich zu einem anderen Titel wechseln und dann wird es kreisförmig weitergehen.

HTML:

<div class="ref-title">Sample Title #1</div>
<div class="ref-title">Sample Title #2</div>

JS:

function titleSwap () {
    $('.ref-title:hidden:first').fadeIn(500).delay(2000).fadeOut(500, function () {
        $(this).appendTo($(this).parent());
        titleSwap();
    });
} titleSwap();

CSS:

.ref-title {
    display: none;
}

JS Fiddle Demo

Also muss ich zuerst div als Block anzeigen und dann wird es verschwinden und das andere wird erscheinen und so weitermachen ... Irgendwelche Tipps?

0
dvlden 6 Dez. 2013 im 13:09

3 Antworten

Beste Antwort

JSFiddle - Hinzufügen einer versteckten Klasse zu dem Div, das Sie als versteckt starten möchten, und Ändern der Funktion wie folgt sollte arbeiten.

HTML

<div class="ref-title">Sample Title #1</div>
<div class="ref-title hidden">Sample Title #2</div>

CSS

.hidden {
    display: none;
}

JS

(function titleSwap() {
    $('.ref-title').not('.hidden').delay(2000).fadeOut(500, function () {
        var $me = $(this);
        $('.ref-title.hidden').removeClass('.hidden').hide().fadeIn(500, function () {
            $(this).removeClass('hidden');
            $me.addClass('hidden');
            titleSwap();
        });
    });
})();

Wenn Sie die versteckte Klasse nicht in das DIV in das Markup aufnehmen möchten, können Sie einfach $('.ref-title:nth-child(2)').addClass('hidden'); vor der Funktion titleSwap verwenden, um die Klasse zum zweiten DIV hinzuzufügen.

1
Jonathan 6 Dez. 2013 im 10:14

Wenn Sie nur Ein- / Ausblenden verwenden können, können Sie Folgendes versuchen: Beispiel ein- / ausblenden

function toggleTitle() {
  $('header > h2').delay(2000).toggle('fast', function () {
    toggleTitle();
  });
}

Wenn Sie fadeIn / fadeOut verwenden müssen, ist es aufgrund des gleichzeitigen Fade-Effekts zwischen den Titeln etwas komplizierter ... dies ist meine Lösung Beispiel zum Ein- und Ausblenden

function toggleTitle() {
  var visible = $('header > h2:visible');
  var hidden  = $('header > h2:hidden');

  visible.delay(2000).fadeToggle('fast', function () {
    hidden.fadeToggle('fast');
    toggleTitle();
  });
}
1
cl0udw4lk3r 6 Dez. 2013 im 09:58

Es ist einfach, wenn Sie Ausweise darauf setzen. Ist das möglich? Schauen Sie sich diese Antwort an jQuery fadeOut ein Div, FadeIn ein anderes an seiner Stelle

$('#fadeout').fadeOut(300);
$('#fadein').delay(2000).fadeIn(300);

Wenn Sie keine IDs hinzufügen können, versuchen Sie dies. Es wird davon ausgegangen, dass sie die einzigen Elemente unter ihrem unmittelbaren Elternteil sind

$('.ref-title:first-child').fadeOut(300);
$('.ref-title:last-child').delay(2000).fadeIn(300);
0
Community 23 Mai 2017 im 12:13