Pregunta

Estoy tratando de mostrar y ocultar una serie de divs utilizando palanca, slideUp y slideDown. Soy capaz de obtener el div a slideDown pero no puedo conseguir que slideUp. He usado este script sin incidentes antes, así que estoy muy confundido en cuanto a por qué esto no está funcionando. He incluido mi guión y el div que estoy tratando de mostrar y ocultar.

Nota rápida: Cuando pongo una etiqueta p regulares de edad en el div "vehículos oculto", que funcionaba bien. Se mostrar y ocultar como se suponía que era. Sin embargo, cuando puse mi mesa de nuevo en que el div, no funcionó.

<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>
¿Fue útil?

Solución

He publicado este consejo como un comentario, y me ayudó a solucionar el problema, así que estoy publicando de nuevo aquí:

Cuando animaciones slideUp / slideDown sólo funcionan de una manera, a menudo es un error de posicionamiento. Ya sea el elemento que está animando necesidades que se establece en position:relative o los hijos del elemento tienen un float aplicado a ellos y no están dando el elemento padre verdadera altura.

Me gustaría probar añadiendo float:none a la mesa. Si eso no funciona, pruebe a añadir a la position:relative div#HiddenVehicles.

Otros consejos

Para aquellos sin problemas flotador / posicionamiento, he encontrado que la actualización de jQuery 1.10 a 1.11 resolvió el problema.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top