14

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:

Normal Menu

Broken SlideUp:

SlideUp

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

Expected Behavior

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');
  });
});
Community
  • 1
  • 1
Kyle Johnson
  • 639
  • 7
  • 21
  • I'm also seeing an animation artifact on the slideDown() as well. It seems to jump at the end. I believe it is also related the the `open` class. – Kyle Johnson Oct 08 '14 at 22:25
  • I tried your above solution and it seems to work fine for me in making the `.slideUp` animation work as seamlessly as `.slideDown`. That said I'm not using Bootswatch. – Vercingetorix Oct 10 '14 at 19:39
  • Are you talking about the solution from my Update 2? It does seem to work, but I feel like the bug is in the bootstrap.js not waiting for the transition. The collapsed navbar animation works flawlessly but is coded very differently than how the dropdown is. – Kyle Johnson Oct 10 '14 at 19:45
  • Yes, talking about Update 2. It could be in the bootstrap.js, but I don't think I've researched it as closely as you have. – Vercingetorix Oct 10 '14 at 20:17
  • 3
    Okay apparently, this is by design. The 'hidden.bs.dropdown' only waits for CSS3 animations to finish, not jQuery. Now... how to do this with CSS3? – Kyle Johnson Oct 10 '14 at 20:56
  • (X-Ref: https://github.com/twbs/bootstrap/issues/14778 ) – cvrebert Oct 10 '14 at 22:31

2 Answers2

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.

Nick Clark
  • 61
  • 8
0

$(document).ready(function(){
    $(".class-name").click(function(){
        $(".class-name").slideToggle(1000);//hear you can change value of slidetoggle i.e "slow","fast", or any number
    });
});
Ankit Parmar
  • 1
  • 1