Opacity Problem

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://fonts.googleapis.com/css?family=Playball"></script>
<!DOCTYPE html>


<title>
David Ray Lee | Home
</title>

<body>
<div class="wrapper">
	<div id="header">
	<div id="navbar">
	<ul>
		<li><a href="index.html">Home</a></li>
		<li>|</li>
		<li><a href="#">Gallery</a></li>
		<li>|</li>
		<li><a href="#">About Me</a></li>
		<li>|</li>
		<li><a href="#">Contact</a></li>
		<li>|</li>
		<li><a href="#">Store</a></li>
	</ul>
	</div>
	<div class="jumbotron">
		<div class="content">
            <h1>Here is the jumbotron</h1>
		</div>
		<div id="bottom">
		
		</div>
	</div>
	</div>
	
<div class="contentboxes">	
	<div class="col-md-4 boxes">
		<div class="content">
		<h1><u>This is a div</u></h1>
		<p>This is the divs content</p>
		</div>
	</div>
	
	<div class="col-md-4 boxes">
		<div class="content">
		<h1><u>This is a div</u></h1>
		<p>This is the divs content</p>
		</div>
	</div>
	
	<div class="col-md-4 boxes">
		<div class="content">
		<h1><u>This is a div</u></h1>
		<p>This is the divs content</p>
		</div>
	</div>
</div>
</div>
</body>

CSS

#navbar li {
	display:inline;
	font-family: 'Playball', cursive;
	color:white;
	margin:5px;
	position:relative;
	top:10px;
}

.jumbotron {
	background-color:black;
	height:400px;
	background-repeat:no-repeat;
	background-size:cover;

}
.contentboxes {
	color:white;
	text-align:center;
}

.boxes {
	border:1px solid white;
}

#view-gallery button {
	width:200px;
	height:50px;
	background-color:rgba(47,45,48);
	border-radius:1px;
	border:none;
	color:white;
}

JavaScript

$(document).ready(function(){
	$('.jumbotron').mouseenter(function(){
		$('.jumbotron').stop().fadeTo('fast', .6);
		$('.jumbotron').prepend('<div id="view-gallery"><button>View Gallery</button></div>');
		
	});
	$('.jumbotron').mouseleave(function(){
		$('.jumbotron').stop().fadeTo('slow', 1);
		$('#view-gallery').remove();
	});
});