Básico jQuery slideUp e slideDown me deixando louco!

Question

minhas habilidades jQuery são muito bons normalmente, mas isso está me deixando louco!

É um accordian bastante simples que eu codificado a partir do zero. utilização jQuery 1.3.2 então não deve haver quaisquer erros de salto, mas, basicamente, se você dar uma olhada no exemplo:

http://www.mizudesign.com/jquery/accordian/basic.html

Eu estou mostrando a altura da div alvo à direita - se contém texto que ele acha que é mais curto do que é e jumping. Se é uma imagem não há nenhum problema.

Eu não consigo descobrir onde estou indo errado - é obviamente no CSS em algum lugar, mas eu tentei todos os suspeitos habituais, como display: block

Todas as idéias seriam recebidas com gratidão!

Seu, Chris

PS Por favor, perdoe a natureza do código-fonte, eu arrancou-o todo o projeto que estou trabalhando para que ele inclui algumas divs que realmente não precisa estar lá.

Answer 1

Você precisa de uma largura ou altura sobre o conteúdo para ele animar sem problemas.

Answer 2

Eu devo admitir que eu encontrei a minha própria solução dinâmica agora.

http://www.mizudesign.com/jquery/accordian/basic.html deve ser corrigido.

É muito simples realmente - apenas acrescenta a altura usando css antes de esconder o div. Funciona um tratamento:)

$("#PlayerButtonsContent div").each (function() {
$(this).css("height", $(this).height());
});

$("#PlayerButtonsContent div").hide();

Answer 3

Eu acho que o problema é que, quando o preenchimento ou margem é adicionada em seguida, ele salta, este foi o caso por mim. você tem que animar a margem no callback

Também "ter em mente" que as tabelas se comportam de buggy com slideDown slideUp e sim usar fadeIn fadeOut

Answer 4

Obter a altura uma vez que o div terminou sua animação a partir do retorno de chamada. É possível que você está recebendo a altura enquanto o div está sendo animado, e você está recebendo um valor de transição.

Se a sua animação é nervoso, tente usar os retornos de chamada. Não abra um div e ocultar uma div ao mesmo tempo. Em vez disso, esconder o seu primeiro div, e dentro do callback mostrar a sua próxima div.

$(".someDiv").slideUp("normal", function(){
  /* This animation won't start until the first
     has finished */
  $(".someOtherDiv").slideDown();
});

Atualização (Dos comentários):

redsquare: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/

Answer 5

Eu também tive um problema slideUp() salto irritante que ocorreu no Safari, mas não Chrome ou IE. Descobriu-se que a tag div que eu estava escondendo / exibição foi abaixo outra tag div que continha divs float:left. Durante o deslizamento para cima, os divs flutuantes seria momentaneamente re-rendeu fazendo com que o salto.

A correção foi simplesmente adicionando clear:both para o estilo do div esconder / mostrando.

Answer 6

O meu problema é que desde que eu tenho um design responsivo eu não sei o que a largura ou a altura do meu elemento vai ser. Depois de ler este post http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm percebi que jQuery foi mudando a posição do meu elemento fixo e mexer com o layout do elemento. Eu adicionei o seguinte ao meu CSS para o elemento e não notou quaisquer efeitos colaterais ruins em IE7 +, Firefox, Chrome e Safari.

display: none;  
overflow: hidden;
position: relative !important;   

Answer 7

Substituir valores margin-bottom com valores de padding-bottom padding-top e margin-top e fez o truque para mim. Não se esqueça de definir o valor de margem para 0 depois disso.

Answer 8

Isso funcionou para mim:

$(this).pathtoslidingelementhere.width($(this).parent().width());

Answer 9

O problema é devido ao IE (modo quirks) tentando processar. "Height: 0px"

A correção: Animate altura a 1 (não 0), então hide e altura de reset:

// slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
        // hide last pixel and reset height
        $(this).hide().css({ height:"" });
    } 
});

Answer 10

Para mim, o problema era a margem (ou preenchimento) no div para exibir / ocultar com slide, mas eu precisava para dar margem (ou estofamento) para que div. Eu resolvi com este truque:

  .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }