I can't get jQuery's slideUp and slideDown methods to smoothly animate the Bootstrap navbar. When I tried using the slideUp method, the navbar only slid up a little before disappearing completely, and the same issue occurred with the slideDown method but in the opposite direction. What could be causing this problem and how can I make the animation work seamlessly?
Here is the snippet of code:
$('.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>