Pergunta

Estou usando uma técnica SlideToggle para mostrar e ocultar mais de 100 divs cheios de informações em meu aplicativo. Eu tenho botões "Mostrar tudo" e "Ocultar todos" e gostaria que eles tenham a animação SlideToggle também (em vez de apenas mostrar e esconder tudo). No entanto, no IE6, o SlideToggle funciona muito lento ao ser aplicado a cada elemento.

Alguém sabe como acelerar isso? Além disso, estou trocando de ícones que estão no msg_head, mas isso não está diminuindo a velocidade. Se eu remover o slidetoggle e substituí -lo por apenas um show/ocultar (no programa a todos/ocultar tudo), ele tem um bom desempenho. No entanto, eu gostaria de ter a animação, se possível.

<p class="msg_head" onclick="toggleSelection($(this));">Heading</p>
<div class="msg_body">
   content
</div>

E meu show e ocultar todas as funções ...

function toggleSelection(element) {
    element.next("msg_body").slideToggle(250);
    element.find(":first-child").toggleClass("ui-icon-circle-arrow-s");
    element.find(":first-child").toggleClass("ui-icon-circle-arrow-e");
}

function showall() {
    $(".msg_head").each(function() {
      $(this).next(".msg_body:hidden").slideToggle(250);
      $(this).find(":first-child").attr('class','ui-icon ui-icon-circle-arrow-s');
    });
}

function hideall() {
    $(".msg_head").each(function() {
      $(this).next(".msg_body:visible").slideToggle(250);
      $(this).find(":first-child").attr('class','ui-icon ui-icon-circle-arrow-e');
    });
}

Para o registro, a função individual de alternância () executa perfeitamente. E substituir o SlideToggle nas funções Showall e Hideall pelo Show and Hide também funciona bem. Estou realmente vendo se há uma maneira de obter a animação SlideToggle sem que ela pareça engasgada.

Foi útil?

Solução

Isso não vai ajudar, mas vou ter que ir com um simples "não" aqui. Simultaneamente, animar mais de 100 Div parece um pouco demais, mas você pode se safar quando um visitante estiver executando um navegador moderno em uma máquina decente. Mas se você deseja acelerar isso especificamente no IE6 ... não há muito que você possa fazer. O navegador é antigo, incluindo o mecanismo de renderização de JavaScript, e nunca será capaz de fazer o que você deseja enquanto parece suave e bonito.

Outras dicas

Qual versão do jQuery você está usando? Se você não está usando o mais recente (1.4.1), recomendo a atualização. Os desenvolvedores do JQuery fizeram uma grande revisão de desempenho para a versão mais recente para abordar questões como a que você descreve acima. Aqui está um link para as notas de lançamento para obter mais informações: http://jquery14.com/day-01/jquery-14

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top