Básico jQuery slideUp e slideDown me deixando louco!
Pergunta
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á.
Solução
Você precisa de uma largura ou altura sobre o conteúdo para ele animar sem problemas.
Outras dicas
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();
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
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/
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.
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;
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.
Isso funcionou para mim:
$(this).pathtoslidingelementhere.width($(this).parent().width());
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:"" });
}
});
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;
}