div se slideDown pero no lo hará slideUp
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>
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.