JQuery Fadeout FadeIn mit li Elementen Problem

Question

Ich habe folgende ungeordnete Liste:

<ul id="#lastcompanieslist">
<li style="display: none;" page="0">whatever 1</li>
<li style="display: none;" page="0">whatever 2</li>
<li style="display: none;" page="0">whatever 2</li>
<li style="display: none;" page="0">whatever 3</li>
<li style="display: none;" page="0">whatever 4</li>
<li style="display: none;" page="1">whatever 5</li>
<li style="display: none;" page="1">whatever 6</li>
<li style="display: none;" page="1">whatever 7</li>
<li style="display: none;" page="1">whatever 8</li>
</ul>
<p class="NextPrevious">
<img src="/Images/PreviousItem.jpg" id="previousbutton" /> 
<img src="/Images/NextItem.jpg" id="nextbutton" />
</p>

Ich habe einen Zähler „actualpage ist der Variablenname“ mit der aktuellen Seite für andere Seite.

Mit JQuery im zu fadeout und FadeIn li Elemente versuchen, wenn der Benutzer klickt auf diese zwei Tasten und je des Zählers der tatsächlichen Seite.

Die Linien, die für fadeout im mit und sind FadeIn Folgendes:

$('#lastcompanieslist li[page!=' + actualpage.toString() + ']').fadeOut(500);
$('#lastcompanieslist li[page=' + actualpage.toString() + ']').fadeIn(500);

Der Effekt funktioniert, aber ich bin ein Flackern Wirkung, die Elemente beginnen fadeout, aber für einen Moment der Liste ist größer in der Höhe Raum. Wenn die FadeIn abgeschlossen ist, wird die Liste wieder auf die ursprüngliche Höhe Größe.

Was könnte das Problem sein, oder wie könnte ich es lösen?

Vielen Dank im Voraus. Mit freundlichen Grüßen. Josema.

Answer 1

Es scheint mir, dass Ihr Problem ziemlich einfach ist. Sie Erstellen einer Liste, in der Regel, diese Liste Ihrer Produkte wie diese

• Artikel 1
• Artikel 2
• Artikel 3

etc, sagen wir mal die Liste oben auf eine Höhe von 3. Nun hat, wenn ich heraus verblassen waren Artikel 1 und 2, würden sie für 500 Millisekunden ausgeblendet, und schließlich unsichtbar sein. An diesem Punkt jquery wechselt die Anzeige von block zu none, so dass Ihr Browser das Element aus dem Blick zu entfernen und Ihre Liste hat eine Höhe von 1.

Nun, wenn Punkt 3 zu Beginn unsichtbar war, habe ich eine Liste der Höhe haben würde 2, Punkt 1 und 2 beginnt zu verblassen (sie sind noch nicht weg), und ich in Punkt 3 beginnen zu verblassen, jquery ändert sich die Anzeige von Punkt 3 auf ‚Block‘ gibt mir eine Liste der Höhe 3, während Fading (bis 1 und 2 fertig Verblassen sind und entfernt werden).

Was Sie tun können, ist Ihre Fade-In starten, nachdem Sie Ihre Fade-Out, wie dies beendet haben:

$('#lastcompanieslist li[page!=' + actualpage.toString() + ']').fadeOut(500,
    function() {
       $('#lastcompanieslist li[page=' + actualpage.toString() + ']').fadeIn(500);
    }
);

Die Funktion, die als zweiten Parameter an fadeOut geleitet wird, wird aufgerufen, wenn das Fading abgeschlossen ist. Sie werden wahrscheinlich noch ein kurzes Flackern nach dem fadeOut sehen und vor dem fadeIn, während die die Liste eine Höhe von Null hat.

Ein anderer Ansatz wäre, zwei getrennte Listen zu haben, die absolute Positionierung platziert mit dem gleichen Platz auf der Web-Seite zu besetzen, und sie verblasst und in gleichzeitig, aber das ist ein wenig mehr Arbeit Bit.

Answer 2

Ihr Problem ist, dass Ihre Fade-In nicht für Ihr fade-out wartet bis zum Ende. Dies macht die Liste so groß sowohl als bis zu dem Zeitpunkt kombiniert, wie das Fade-Out vollständig verschwunden ist.

, um den gewünschten Effekt Unter der Annahme, ist für sie völlig dann die korrekten zu verblassen verblassen in Sie nach:

$('#lastcompanieslist li[page!=' + actualpage.toString() + ']').fadeOut(500, function() {
$('#lastcompanieslist li[page=' + actualpage.toString() + ']').fadeIn(500); });

Sie können auch eine CSS-min-Höheneinstellung auf Ihrem ul zu berücksichtigen, die Auswirkungen davon zu minimieren, für einen Bruchteil einer Sekunde auf den Rest der Seite auf 0 Elemente werden reduziert, oder wenn Sie wirklich Nüsse gehen wollen Sie könnten starten, indem eine feste Höhe von seiner aktuellen Höheneinstellung, ausgeblendet es vorhandene Inhalte, animieren es auf die gewünschte Höhe Verwendung Animate und dann verblassen in der neuen Liste. Dies würde den glatten Übergang geben.

(Wenn das nicht das, was Sie nach, klären das gewünschte Ergebnis, und ich werde es noch einmal geben =))