Jquery Fadeout FADEIN avec des éléments li problème

Question

j'ai la liste non ordonnée suivant:

<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 « actualpage est le nom de la variable » à la page en cours d'autre part. Avec Jquery im essayant de fondre et de filtrer les éléments lorsque l'utilisateur clique sur ces deux boutons et en fonction du compteur de la page réelle.

Les lignes im utilisant 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 vacillante, les éléments commencent à fadeOut, mais pour un moment la liste est plus en hauteur. Lorsque la fadein est terminée, la liste retourne à la taille de la hauteur d'origine.

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

Merci d'avance. Cordialement. Joséma.

Answer 1

Il me semble que votre problème est assez simple. Vous créez une liste, normalement, cette liste vos articles comme celui-ci

• article 1
• article 2
• article 3

etc, disons que la liste ci-dessus pour a une hauteur Maintenant, si je devais supprimer les éléments 1 et 2, ils disparaîtraient pendant 500 millisecondes et finiraient par être invisibles. À ce stade, jquery change l'affichage de block à none, ce qui fait que votre navigateur supprime l'élément, et votre liste a une hauteur de 1.

Maintenant, si l'élément 3 était invisible au début, j'aurais une liste de hauteur 2, item 1 et 2 commence à disparaître (ils ne sont pas encore partis), et je commence à fondre dans le point 3, jquery change l'affichage du point 3 en 'block' me donnant une liste de hauteur 3 , tout en décolorant (jusqu'à ce que 1 et 2 ont disparu et sont retirés).

Ce que vous pouvez faire est de commencer votre fondu après que vous avez fini votre fondu, comme ceci:

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

La fonction qui est passée comme second paramètre à fadeOut sera appelée lorsque le fading est complet. Vous verrez probablement un bref scintillement après le fadeOut et avant le fadeIn, pendant lequel la liste aura une hauteur de zéro. Une approche différente serait d'avoir deux listes séparées, placées en utilisant le positionnement absolu pour occuper le même espace sur la page Web, et de les faire disparaître et en même temps, mais c'est un peu plus de travail.

Answer 2

Votre problème est que votre fondu d'entrée n'attend pas la fin de votre fondu. Cela rend la liste aussi grande que les deux combinés jusqu'à ce que le fondu disparaisse complètement.

En supposant que l'effet désiré est pour qu'il fade out entièrement puis les corriger à disparaître en vous êtes après:

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

Vous pouvez également envisager d'établir un CSS min-height sur votre ul à minimiser l'impact de la réduction à 0 sur une fraction de seconde sur le reste de la page, ou si vous voulez vraiment devenir fou, vous pouvez commencer par définir une hauteur fixe de sa hauteur actuelle, fondre son contenu existant, l'animer à la hauteur désirée en utilisant Animate, puis fondu dans votre nouvelle liste. Cela donnerait la transition la plus douce.

(Si ce n'est pas ce que vous recherchez, clarifiez le résultat escompté et je donnerai un autre coup =))