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>
Foi útil?

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.

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