FadeIn Jquery Fadeout con problema elementos li

Question

Tengo la siguiente lista no ordenada:

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

Tengo un contador de "actualpage es el nombre de la variable" con la página actual para otro lado.

Con Jquery im tratando de elementos fadeout y Li FadeIn cuando el usuario hace clic en este botón y dos en función del contador de la página real.

Las líneas que im usando para fadeout y FadeIn son los siguientes:

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

El efecto está funcionando, pero Im tener un efecto de parpadeo, los artículos comienza a desvanecimiento, pero por un momento la lista es más grande en el espacio de altura. Cuando el FadeIn es completa, la lista vuelve al tamaño altura original.

¿Cuál podría ser el problema, o ¿Cómo podría solucionar?

Gracias de antemano. Saludos cordiales. Josema.

Answer 1

Me parece que el problema es bastante sencillo. Estás creando una lista, normalmente, esta lista de sus artículos como este

• punto 1
• punto 2
• el punto 3

etc, digamos que la lista anterior a tiene una altura de 3. Ahora, si yo fuera a desaparecer el punto 1 y 2, que se había fundido de salida de 500 milisegundos, y, finalmente, ser invisible. En ese momento jQuery cambia la pantalla de block a none, causando su navegador para eliminar el elemento de la vista, y su lista tiene una altura de 1.

Ahora, si el artículo 3 era invisible al principio, tendría una lista de altura 2, punto 1 y 2 comienza a desaparecer (que no han ido todavía), y comienzo a desvanecerse en el punto 3, jquery cambia la visualización del punto 3 de 'bloque' produce una lista de altura 3, mientras que el desvanecimiento (hasta 1 y 2 son desvanecimiento terminado, y se eliminan).

Lo que puede hacer es empezar el fundido de entrada después de que haya terminado su fundido de salida, así:

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

La función que se pasa como segundo parámetro a fadeOut será llamado cuando el desvanecimiento está completa. Todavía probable que vea un breve parpadeo después de la fadeOut y antes de la fadeIn, durante el cual la lista tendrá una altura de cero.

Un enfoque diferente sería tener dos listas separadas, colocadas utilizando posicionamiento absoluto a ocupar el mismo espacio en la página web, y ellos se desvanecen y en forma simultánea, pero eso es un poco más de trabajo.

Answer 2

Su problema es que el fundido de entrada no está esperando su fundido de salida a fin. Esto está haciendo la lista tan grande como ambos combinados hasta el momento en la desaparición gradual ha desaparecido por completo.

Suponiendo que el efecto deseado es que se desvanecen por completo luego de los adecuados a desvanecerse en lo que busca:

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

También puede que desee considerar el establecimiento de un CSS min-height en su ul para minimizar el impacto de la misma se reduce a 0 elementos para una fracción de segundo en el resto de la página, o si realmente quiere ir tuercas que podría para empezar, establezca una altura fija de su altura actual, Fundido en su contenido existente, lo animan a la altura deseada usando Animate y luego se desvanecen en su nueva lista. Esto daría a la transición más suave.

(Si eso no es lo que está buscando, aclarar el resultado previsto y voy a darle otra oportunidad =))