make slideUp and slideDown work on bootstrap navbar

I want jQuery's slideUp and slideDown method to work smoothly on bootstrap's navbar. But as I tested it, when slideUp method was applied, the navbar only slid up only a little part of it, then disappeared immediately, the same went to slideDown, only in the opposite direction. Why did this happen and how to make the animation work smoothly?

The snippet is as follows.

$('.slideUpBtn').click(function() {
  $('nav').slideUp("slow");
});
$('.slideDownBtn').click(function() {
  $('nav').slideDown("slow");
});
.slideUpBtn {
  position: fixed;
  left: 0;
  bottom: 0;
}
.slideDownBtn {
  position: fixed;
  right: 0;
  bottom: 0;
}
<html>

<head>
  <title>temp</title>
  <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header"><a href="#" class="navbar-brand">Brand</a>
      </div>
    </div>
  </nav>
  <button type="button" onclick="slideUp_event()" class="slideUpBtn">slideUp</button>
  <button type="button" onclick="slideDown_event()" class="slideDownBtn">slideDown</button>
</body>

</html>

Answers 1

  • This happened because the nav element has CSS property "min-height: 50px;" from class navbar, and methods slideUp and slideDown increase and decrease the height property so when height go under min-height it will be ignored.

    you can overwrite the min-height or change buttons function as the following:

     $('.slideUpBtn').click(function() {
       var minHeight = $('nav').css('min-height');
       $('nav').css('min-height',0);
       $('nav').slideUp("slow", function(){
                $('nav').css('min-height', minHeight);
        });
    });
    $('.slideDownBtn').click(function() {
         var minHeight = $('nav').css('min-height');
       $('nav').css('min-height',0);
      $('nav').slideDown("slow", function(){
                $('nav').css('min-height', minHeight);
        });
    });
    

Related Articles