Question

我有点击按钮时执行的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">&times;</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>

Answer 1

也许尝试在JQuery函数之前将<script> $(".buttonHE").mouseenter(function(){ $(this).css("color", "#151515"); $(this).css("background-color", "#DAA520");  }); $(".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>库放在顶部，以便首先加载它。来自

的变化

<script src="js/bootstrap.min.js">
</script>

<script>

$(".buttonHE").mouseenter(function(){
     $(this).css("color", "#151515");
     $(this).css("background-color", "#DAA520");
// $(this).css("border-color", "#151515"); Or just remove this line
}); 

$(".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>

TO

get()

Answer 2

在代码底部，您需要在＃id1高度添加样式：“0px”：

//...
$( document ).ready(function() {
    $("#id1").css({ height: "0px" });
});
</script>

这将解决您的问题

jQuery函数第一次不起作用，之后完美运行

2 个答案: