Bootstrap 3 Dropdown Slidedown Strange Behavior when Navbar Collapsed

Question

So I was adding some animations to the navbar dropdowns, but for some reason the most accepted answer (Adding a slide effect to bootstrap dropdown) seems to break or become "regular" sized when sliding up on small window sizes.

So the weird thing is this only seems to happen with the slideUp animation from the article posted:

// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideDown(5000);
});

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(5000);
});

I can copy and paste those lines into Google Chrome's console on http://bootswatch.com/default/, change my resolution to one where the navbars collapse, and they all break. (I extended the animation times to try and troubleshoot.)

Normal:

Broken SlideUp:

But for some reason, if I run $('.navbar').find('.dropdown-menu').slideUp(5000); I get a normal behaving menu:

Thoughts?

Update It works with the last option because that doesn't remove the 'open' class from the enclosing dropdown LI element. So perhaps the open class is being prematurely removed while the animation is running.

Update 2 I can sorta fix it using a preventDefault:

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
  e.preventDefault();
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300, function(){
    $(this).parent().removeClass('open');
  });
});

Answer 1

It's difficult without being able to inspect the elements but I have a hunch that your problem may lie with the container with the class "drowpdown-menu" (or whichever element actually has the scroll bar attached to it if it's not dropdown-menu). I don't think there's a problem with your jQuery but I would try adding a style to control the overflow property. Try setting it to hidden to force the box to go outside the bounds of the page. The main scroll should handle it from there. However from a UX point of view I would caution you on creating a menu with a lot of nesting which can result in a poor experience to the end user.