JQuery Fadeout Fadein com o problema de elementos li

Question

Eu tenho a seguinte lista não 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>

Eu tenho um contador "RealPage é o nome da variável" com a página atual por outro lado.

Com o jQuery, estou tentando desbastar e desbaste elementos quando o usuário clica nesses dois botões e dependendo do balcão da página real.

As linhas que estou usando para Fadeout e Fadein são as seguintes:

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

O efeito está funcionando, mas estou tendo um efeito tremeluzente, os itens começam a desaparecer, mas por um momento a lista é maior em espaço de altura. Quando o Fadein está concluído, a lista retorna ao tamanho da altura original.

Qual poderia ser o problema, ou como eu poderia resolvê -lo?

Desde já, obrigado. Atenciosamente. Josema.

Answer 1

Parece -me que seu problema é praticamente direto. Você está criando uma lista, normalmente, esta lista seus itens como este

• item 1
• Item 2
• Item 3

etc, digamos que a lista acima tenha uma altura de 3. Agora, se eu desaparecesse o Item 1 e 2, eles desapareceriam por 500 milissegundos e, eventualmente, seriam invisíveis. Nesse ponto, o jQuery muda a tela de block para none, fazendo com que o navegador remova o elemento da visualização e sua lista tem uma altura de 1.

Agora, se o item 3 fosse invisível no início, eu teria uma lista de altura 2, o item 1 e 2 começar a desaparecer (eles ainda não foram embora), e eu começo a desaparecer no item 3, o jQuery muda o Exibição do Item 3 para 'Block', dando -me uma lista de altura 3, enquanto desbotou (até que 1 e 2 terminem, e são removidos).

O que você pode fazer é iniciar seu desbotamento depois de terminar o seu desbotamento, assim:

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

A função que é passada como um segundo parâmetro a se destacar será chamada quando o desbotamento estiver concluído. Você provavelmente ainda verá um breve cintilação após o Fadeout e antes do Fadein, durante o qual a lista terá uma altura de zero.

Uma abordagem diferente seria ter duas listas separadas, colocadas usando o posicionamento absoluto para ocupar o mesmo espaço na página da web e desaparecerem e simultaneamente, mas isso é um pouco mais de trabalho.

Answer 2

Seu problema é que o seu desbotamento não está esperando que seu desbotamento termine. Isso está tornando a lista tão grande quanto os dois combinados até o tempo que o desbotamento desapareceu completamente.

Supondo que o efeito desejado seja que ele desapareça completamente, então os corretos desaparecem: você está atrás:

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

Você também pode considerar definir uma altura Min CSS em seu UL para minimizar o impacto de ser reduzido a 0 elementos para uma fração de segundo no restante da página, ou se você realmente quer enlouquecer, pode começar a configurar configurando, configurando Uma altura fixa de sua altura atual, desbota o conteúdo existente, anime -o à altura desejada usando Animar e depois desaparece em sua nova lista. Isso daria a transição mais suave.

(Se não é isso que você procura, esclareça o resultado pretendido e eu darei outra foto =)