div will slideDown but it won't slideUp
I am attempting to show and hide a series of divs using toggle, slideUp and slideDown. I am able to get the div to slideDown but I can't get it to slideUp. I've used this script without incident before so I'm really confused as to why this isn't working. I have included my script and the div I'm attempting to show and hide.
Quick Note: When I put a regular old p tag in the "hidden vehicles" div, it worked fine. It was showing and hiding like it was supposed to. However, when I put my table back into that div, it didn't work.
<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="Hi开发者_Go百科ddenVehicles" style="display:none; width:730px;">
(there will be a giant table in here)
</div>
I posted this advice as a comment, and it helped to fix the problem so I am posting it again here:
When slideUp/slideDown animations only work one way, it is often a positioning bug. Either the element you are animating needs to be set to position:relative
or the children of the element have a float
applied to them and are not giving the parent element true height.
I would try adding float:none
to the table. If that doesn't work try adding position:relative
to the div#HiddenVehicles
.
For those without float/positioning problems, I found that upgrading from jQuery 1.10 to 1.11 solved the problem.
精彩评论