-2
ボタンをクリックしたときに実行されるjQueryアニメーションがあります。スムーズに高さをアニメーション化するのではなく（最初のサイズまでスライドさせる必要があります）、初めてポップアウトした後は毎回うまく動作します。jQuery関数が初めて動作しません。そのあとで完全に動作します
また、要素が消えても、要素がフェードアウトすることがありますが、これを削除する方法はありますか？要素のすぐ下に要素がある場合に特に目に見えます。
<!DOCTYPE html>
<html lang="en">
<head>
<title>A title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- search input (style & php (WHERE ifset)), fix animation for input, text -->
<style>
body{
font-family: "Verdana", Times, sans-serif;
}
.topBar{
background-color:#151515;
height:75px;
font-size:1.55em;
}
#mainDiv{
background-color:#DAA520;
min-height:400px;
}
.topMenuDiv{
width:250px;
color:#DAA520;
border:5px #DAA520 solid;
border-radius:35px;
background-color:inherit;
padding:10px;
margin-top:4px;
display: flex;
align-items: center;
justify-content: center;
}
#id1{
background-color:#151515;
display:none;
}
#closeButton{
width:50px;
color:#DAA520;
background-color:inherit;
border:5px #DAA520 solid;
border-radius:35px;
padding:5px;
margin-left:90%;
}
#bottomDiv{
height:150px;
background-color:#151515;
}
</style>
</head>
<body>
<div class = "container">
<div class="row">
<div class = "topBar col-md-12 col-md-6"></div>
<div class = "topBar col-xs-6 col-md-3">
<button class = "topMenuDiv buttonHE" id = "button1">
<div>Click for effect</div>
</button>
</div>
<div class = "topBar col-xs-6 col-md-3">
<a href = ""><div class="topMenuDiv buttonHE">Info?</div></a>
</div>
</div>
<div class = "row col-xs-12" id = "id1">
<button type="button" class = "buttonHE class1" id = "closeButton">×</button>
<form class = "class1" action = "" method="post">
<p>
Just some text Just some text Just some text Just some text Just some text
Just some text Just some text Just some text Just some text Just some text
Just some text Just some text Just some text Just some text Just some text
Just some text Just some text Just some text Just some text Just some text
</p>
</form>
</div>
<div class = "row" id = "mainDiv">
</div>
</div>
</div>
<div class = "container">
<div class="row">
<div class = "col-xs-12 col-md-12" id = "bottomDiv"></div>
</div>
</div>
</div>
<script>
$(".buttonHE").mouseenter(function(){
$(this).css("color", "#151515");
$(this).css("background-color", "#DAA520");
<!-- $(this).css("border-color", "#151515"); -->
});
$(".buttonHE").mouseleave(function(){
$(this).css("color", "#DAA520");
$(this).css("background-color", "#151515");
$(this).css("border-color", "#DAA520");
});
$var1 = $('#id1').outerHeight();
$("#mainDiv").html($var1);
$(document).ready(function() {
$("#button1").click(function(){
$("#id1").css("display", "unset");
$("#id1").animate({height: $var1});
$(".class1").fadeIn(300);
});
});
$(document).ready(function() {
$("#closeButton").click(function(){
$(".class1").fadeOut();
$("#id1").animate({height: '0px'});
$("#id1").fadeOut();
});
});
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</html>
'<！ - $（this）.css（" border-color "、"＃151515 "）; - > 'は無効なJavaScriptです。 HTMLコメントではなく、JavaScriptコメントを使用する必要があります。 – 4castle
なぜブートストラップを2回組み込んでいますか？それはハンドラの多くが2回宣言される原因となります – amenadiel
コンソールが何を確認しましたか？ –