Jquery Fadeout fadein avec li éléments de problème

Question

j'ai le texte suivant de liste non ordonnée:

<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>

J'ai un compteur de "actualpage est le nom de la variable" à la page en cours pour d'autres à la main.

Avec Jquery im essayant de fadeout et fadein li éléments lorsque l'utilisateur clique sur ces deux boutons et la fonction du compteur de la page.

Les lignes que jutilise pour fadeout et fadein sont les suivantes:

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

L'effet fonctionne, mais im ayant un effet scintillant, les éléments commence à fadeout, mais pour un instant la liste est plus à la hauteur de l'espace.Lorsque le fadein est terminée, la liste renvoie à l'origine de la hauteur de la taille.

Quel pourrait être le problème, ou comment pourrais-je le résoudre?

Merci à l'avance.Salutations.Josema.

Answer 1

Il me semble que votre problème est assez simple.Vous êtes en train de créer une liste, normalement, cette liste de vos articles comme ceci

• point 1
• article 2
• point 3

etc, disons que la liste ci-dessus a une hauteur de 3.Maintenant, si j'étais de la fermeture de l'élément 1 et 2, ils avaient fondu pour les 500 millisecondes, et, finalement, être invisible.À ce point de jquery, l'affichage change de block pour none, à l'origine de votre navigateur pour supprimer l'élément de la vue, et votre liste a une hauteur de 1.

Maintenant, si l'article 3 était invisible au début, j'aurais une liste de hauteur 2, point 1 et 2 commence à s'estomper (ils ne sont pas encore parti), et j'ai commencer à s'estomper à l'article 3, jquery, l'affichage change de la rubrique 3 "bloquer" en me donnant une liste de hauteur de 3, tandis que la décoloration (jusqu'à 1 et 2 sont finis à la décoloration, et sont supprimés).

Ce que vous pouvez faire est de commencer votre fondu après que vous avez terminé votre fade out, comme ceci:

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

La fonction qui est passé en second paramètre à fadeOut sera appelée lorsque l'effacement est terminée.Vous aurez encore probablement voir un bref scintillement après le fadeOut et avant le fadeIn, au cours de laquelle la liste auront une hauteur de zéro.

Une autre approche serait d'avoir deux listes distinctes, placées à l'aide de positionnement absolu à occuper le même espace sur la page web, et à la décoloration, et en même temps, mais c'est un peu plus de travail.

Answer 2

Le problème est que votre fade-in n'est pas en attente de votre fade-out à la fin.C'est la liste grande comme les deux à la fois, jusqu'à ce que le fondu est complètement disparu.

En supposant que l'effet désiré est pour elle de disparaître entièrement, puis celles qui sont correctes fondu vous êtes après:

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

Vous pouvez également envisager de mettre un CSS min-height sur votre ul pour minimiser l'impact de celui-ci étant réduit à 0 éléments pour une fraction de seconde sur le reste de la page, ou si vous voulez vraiment aller de noix que vous pourriez commencer par la définition d'une hauteur fixe de sa hauteur actuelle, fade out, c'est le contenu existant, de l'animation à la hauteur souhaitée à l'aide de Animer et puis fondu dans votre nouvelle liste.Ce serait lui donner la meilleure transition.

(Si ce n'est pas ce que vous êtes après, clarifier le résultat prévu et je vais lui donner une autre chance =))