Jquery Fadeout fadeIn con elementi li problema

Question

Ho la seguente lista non ordinata:

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

Ho un contatore "actualpage è il nome della variabile" con la pagina corrente altra parte.

Con Jquery im cercando di dissolvenza e fadein elementi li quando l'utente sceglie questi due tasti e seconda del contatore di pagina attuale.

Le linee che im utilizzando per la dissolvenza e fadein sono i seguenti:

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

L'effetto è in funzione, ma im aventi effetto tremolante, gli elementi inizia a dissolvenza, ma per un momento la lista è più grande nello spazio in altezza. Quando il fadein è completo, la lista ritorna alle dimensioni altezza originale.

Quale potrebbe essere il problema, o come potrei risolverlo?

Grazie in anticipo. Cordiali saluti. Josema.

Answer 1

Mi sembra che il problema è più o meno semplice. Si sta creando un elenco, normalmente, questo elenco i tuoi articoli come questo

• punto 1
• punto 2
• punto 3

ecc, diciamo che la lista qui sopra per ha un'altezza di 3. Ora, se dovessi fade out punto 1 e 2, che avevano fade out per 500 millisecondi, e, infine, essere invisibile. A quel punto jquery cambia la visualizzazione da block a none, causando il browser per rimuovere l'elemento dalla vista, e la vostra lista ha un'altezza di 1.

Ora, se l'articolo 3 era invisibile agli inizi, mi piacerebbe avere una lista di altezza 2, punto 1 e 2 inizia a fade out (che non sono ancora andato), e mi metto a svanire nel punto 3, jquery modifica la visualizzazione della voce 3 'block' mi dà un elenco di altezza 3, mentre dissolvenza (fino 1 e 2 sono finiti fading, e vengono rimossi).

Che cosa si può fare è avviare il fade-in dopo che hai finito il tuo fade out, in questo modo:

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

La funzione che viene passato come secondo parametro fadeOut verrà chiamato quando la dissolvenza è completata. Ci si può comunque probabilmente vedere una breve guizzo dopo la fadeOut e prima della fadeIn, durante il quale la lista avrà un'altezza pari a zero.

Un approccio diverso sarebbe quello di avere due liste separate, di collocamento utilizzato per il posizionamento assoluto per occupare lo stesso spazio sulla pagina web, e li fade out e allo stesso tempo, ma questo è un po 'più di lavoro.

Answer 2

Il problema è che il fade-in non è in attesa per il fade-out alla fine. Questo sta facendo la lista grande come entrambi abbinati fino a quando il fade out è completamente sparito.

Supponendo che l'effetto desiderato è per esso a svanire del tutto poi quelli corretti a svanire in siete dopo:

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

Si può anche prendere in considerazione la fissazione di un CSS min-height sul tuo ul per ridurre al minimo l'impatto di esso viene ridotto a 0 elementi per una frazione di secondo sul resto della pagina, o se si vuole veramente andare dadi si poteva inizia impostando un'altezza fissa della sua altezza corrente, dissolvenza contenuto è esistente, animato fino all'altezza desiderata utilizzando animare e poi svanire nel nuovo elenco. Questo darebbe la transizione più morbida.

(Se questo non è quello che stai dopo, chiarire il risultato desiderato e ti darò un altro colpo =))