Question

有人可以建议一个jQuery解决方案，当点击#trigger按钮时，我可以在#header的顶部创建#overlay slideDown（）吗？

我的目标显然是，在点击按钮后，覆盖元素会在我的标题部分顶部滑动完全覆盖。

查看下面的代码。

HTML

<div id="header">
  <h1>This is the header.</h1>
</div>

<div id="overlay">
  <h1>This is the overlay.</h1>
</div>

<button id="trigger">Trigger</button>

CSS

* {
  margin: 0;
}

#header {
  background-color: tomato;
  height: 70px;
  text-align: center;
}

#header h1 {
  color: white;
  padding-top: 15px;
}

#overlay {
  background-color: green;
  height: 70px;
  text-align: center;
}

#overlay h1 {
  color: white;
  padding-top: 15px;
}

button {
  height: 50px;
  width: 100px;
  margin-top: 200px;
  margin-left: 400px;
  font-size: 25px;
}

JQUERY

$(document).ready(function() {
  $("#overlay").hide();

  $("#trigger").on("click", function() {
    $("#overlay").slideDown(700);
  });  
});

Answer 1

将#overlay显示设置为无;

#overlay {
  display: none;
  background-color: green;
  height: 70px;
  text-align: center;
}

查询可以是这样的。

<script type="text/javascript">
$(document).ready(function() {
  $("#trigger").on("click", function() {
    $("#overlay").css("display", "block").slideToggle(700);//Or goes UP or goes DOWN
  });
});
</script>

或者，如果你真的只想要它下降然后这样做：

 <script type="text/javascript">
$(document).ready(function() {
  $("#trigger").on("click", function() {
    $("#overlay").css("display", "block").slideDown(700);
  });
});
</script>

[编辑]

很简单，将<div id="overlay">移到<div id="header">

之上

Answer 2

#overlay {
  display: none;
  background-color: green;
  height: 70px;
  text-align: center;
  //also add this lines to make sure the overlay covers everything you have in the header
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

如何使用jQuery覆盖HTML元素？

2 个答案: