Fade is missing

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<body>
    <div class="container-fluid">
      <div class="row">
        <div class="col col-lg-12 col-md-12 col-sm-12 col-xs-12" style="color: #cc6110;" align="center">
          <h1 class="title">Album List</h1>
        </div>
      </div>
      <div align="center">
        <button class="btn btn-default filter-button" data-filter="all">All</button>
        <button class="btn btn-default filter-button" data-filter="letterA">A</button>
        <button class="btn btn-default filter-button" data-filter="letterB">B</button>
        <button class="btn btn-default filter-button" data-filter="letterC">C</button>
        <button class="btn btn-default filter-button" data-filter="letterD">D</button>
        <button class="btn btn-default filter-button" data-filter="letterE">E</button>
        <button class="btn btn-default filter-button" data-filter="letterF">F</button>
        <button class="btn btn-default filter-button" data-filter="letterG">G</button>
        <button class="btn btn-default filter-button" data-filter="letterH">H</button>
        <button class="btn btn-default filter-button" data-filter="letterI">I</button>
        <button class="btn btn-default filter-button" data-filter="letterJ">J</button>
        <button class="btn btn-default filter-button" data-filter="letterK">K</button>
        <button class="btn btn-default filter-button" data-filter="letterL">L</button>
        <button class="btn btn-default filter-button" data-filter="letterM">M</button>
        <button class="btn btn-default filter-button" data-filter="letterN">N</button>
        <button class="btn btn-default...

CSS

body {
	font-family: Arial;
	font-size: 14pt;
	font-weight: bold;
	color: #cc6110;
	background-color: #e3e0ce;									/* Nenesse 8/17/2017: New color */
	background-image: url(images/background-woodenfloor.jpg); 	/* Nenesse 8/16/2017: New background image */	
}

.title {
  font-size : 24pt;
  font-weight: bold;

  color: #cc6110;						/* Nenesse 8/16/2017: New color */
}

img {
	border: 0;
}

a {
	font-size: 14pt;
	color: #285e80;						/* Nenesse 8/16/2017: New color instead of #FFFFFF */
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: #cc6110;	
}

a:hover img#thumbimage {
	text-decoration: none;
}

.artist {					/* Nenesse 8/16/2017: New class for different color */
	color: #285e80;
	font-size:12pt;
	font-weight:bold;
}

.album {					/* Nenesse 8/16/2017: new class for different color */
	color: #cc6110;
	font-size:10pt;
	font-weight:bold;
}

.navigationline {
  padding: 2px 0px;
}

.btn-info {
	background-color: #285e80;
	border-color: #cc6110;
}

.btn-info:hover {
	background-color: #cc6110;
	border-color: #285e80;
}
.filter-button {
	font-size: 18px;
	border: 1px solid #cc6110;
	border-radius: 5px;
	text-align: center;
	color: #cc6110;
	margin-bottom: 30px;
}
.filter-button:hover {
	font-size: 18px;
	border: 1px solid #cc6110;
	border-radius: 5px;
	text-align: center;
	color: #ffffff;
	background-color: #285e80;
}
.btn-default:active .filter-button:active {
	background-color: #285e80;
	color: white;
}
.card {
	margin-top: 30px;
}

JavaScript

$(document).ready(function(){
						$(".filter-button").click(function(){
							var value = $(this).attr('data-filter');
							if(value == "all") {
								$('.filter').show('1000');
							}
							else {
								$(".filter").not('.'+value).hide('3000');
								$('.filter').filter('.'+value).show('3000');
							}
						});
						if ($(".filter-button").removeClass("active")) {
							$(this).removeClass("active");
						}
						$(this).addClass("active");
					});