div Will Will Slidown, mas não vai deslizar
Pergunta
Estou tentando mostrar e ocultar uma série de divs usando alternância, deslize e slidown. Sou capaz de fazer com que o div para o arremesso, mas não consigo deslizar. Eu já usei esse script sem incidentes antes, então estou realmente confuso sobre por que isso não está funcionando. Incluí meu script e o div que estou tentando mostrar e esconder.
Nota rápida: quando eu coloco uma etiqueta P antiga na div e "veículos escondidos", funcionou bem. Estava aparecendo e escondido como deveria. No entanto, quando coloquei minha mesa de volta nessa div, não funcionou.
<script type="text/javascript">
$(document).ready(function() {
$(".ShowVehicles").toggle(function() {
$(".HiddenVehicles").slideDown(2000);
$(this).text("Hide All");
}, function () {
$(".HiddenVehicles").slideUp(2000);
$(this).text("Show All");
});
});
<div class="HiddenVehicles" style="display:none; width:730px;">
(there will be a giant table in here)
</div>
Solução
Publiquei este conselho como um comentário e ajudou a resolver o problema, por isso estou postando novamente aqui:
Quando as animações deslizantes/slidown funcionam apenas de uma maneira, geralmente é um bug de posicionamento. Ou o elemento que você está animando precisa ser definido como position:relative
ou os filhos do elemento têm um float
aplicado a eles e não está dando ao elemento pai altura verdadeira.
Eu tentaria adicionar float:none
para a mesa. Se isso não funcionar, tente adicionar position:relative
para o div#HiddenVehicles
.
Outras dicas
Para aqueles sem problemas de flutuação/posicionamento, descobri que a atualização do JQuery 1.10 para 1.11 resolveu o problema.