javascript - 当旁边的 div 被移除时，div 会继续移动

Question

我正在制作这个 Windows 8 Metro 风格的网站，当您单击其中一个方 block 时，它会通过 jquery .slideUp() 弹出。当它向上滑动时，旁边的方 block 会跳到原来的位置，这不是我想要的。

$(document).ready(function() {
  $(".blok").click(function() {
    $(this).slideUp(1200, "easeOutBounce");
  });
});

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.menu {
  height: 8%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: #363636;
  font-family: "Raleway", sans-serif;
  font-size: 50px;
}
.inhoud {
  height: 84%;
  width: 100%;
}
.blok {
  background-color: #EC1D25;
  display: flex;
  float: left;
  overflow: auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: white;
  text-align: center;
  font-size: 36px;
  font-family: "Raleway", sans-serif;
}
#blokGroot {
  height: 100%;
  width: 50%;
  background-color: #2D89EF;
}
#blokMiddel {
  height: 50%;
  width: 50%;
  background-color: #1E7145;
}
#blokKlein1 {
  height: 50%;
  width: 25%;
  background-color: #7E3878;
}
#blokKlein2 {
  height: 50%;
  width: 25%;
  background-color: #DA532C;
}
.footer {
  height: 8%;
  box-sizing: border-box;
  color: white;
  background-color: #363636;
  font-family: "Raleway", sans-serif;
  text-align: center;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

<!--Dit laadt het Raleway lettertype: -->
<link href='https://fonts.googleapis.com/css?family=Raleway:200,300' rel='stylesheet' type='text/css'>

<!--Dit laadt jQuery: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>

<!--Dit laadt jQueryui: -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>


<!--Dit is de header: -->
<div class="menu">
  MAX
</div>


<!--Dit is alle inhoud emt de 4 vakken: -->
<div class="inhoud">

  <div class="blok" id="blokGroot">
    <a href="#" id="overMij-link">
      <img src="SVG/overMij.svg" alt="Over mij" height="150">
    </a>
  </div>

  <div class="blok" id="blokMiddel">
    <a href="#" id="informatica-link">
      <img src="SVG/informatica.svg" alt="Informatica" height="150">
    </a>
  </div>

  <div class="blok" id="blokKlein1">
    <a href="#" id="muziek-link">
      <img src="SVG/muziek.svg" alt="Muziek" height="150">
    </a>
  </div>

  <div class="blok" id="blokKlein2">
    <a href="#" id="hobbies-link">
      <img src="SVG/hobbies.svg" alt="Hobbies" height="150">
    </a>
  </div>

</div>


<!--Dit is de footer: -->
<div class="footer">
  (c) 2015
</div>

Answer 1

每个 .blok 中的包装器将是这里的一种解决方案，您可以在其中滑动 .wrapblok 而不是 .blok。

要控制.blokwrap和.bloktext的显示，可以使用float:或position:当您滑出图像时，文本可能会向上滑动或只是在“后面”。

CSS

.blok {
  overflow: hidden;   /* make blok no scroll and have bloktext scroll content */
}
.blokwrap {
  height: 100%;
  width: 100%;
  etc...
}
.bloktext {
  height: 100%;
  width: 100%;
  overflow: auto;  /* make it scroll might be good if content is big */
  etc...
}

HTML

<div class="blok" id="blokGroot">
  <div class="blokwrap">
    <a href="#" id="overMij-link">
      <img src="SVG/overMij.svg" alt="Over mij" height="150">
    </a>
  </div>
  <div class="bloktext">
    Here you can have some text etc...
  </div>
</div>

etc...

这是一个展示其工作原理的快速示例，其中我仅更改了“blokKlein1”元素和一些 css。

$(document).ready(function() {
  $(".blokwrap").click(function() {
    $(this).slideUp(1200, "easeOutBounce");
  });
});

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.menu {
  height: 8%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: #363636;
  font-family: "Raleway", sans-serif;
  font-size: 50px;
}
.inhoud {
  height: 84%;
  width: 100%;
}
.blok {
  background-color: #EC1D25;
  float: left;
  overflow: hidden;
  box-sizing: border-box;
  color: white;
  text-align: center;
  font-size: 36px;
  font-family: "Raleway", sans-serif;
}

.blokwrap, .bloktext {
  background-color: #EC1D25;
  display: flex;
  float: left;
  overflow: auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: white;
  text-align: center;
  font-size: 36px;
  font-family: "Raleway", sans-serif;
}

#blokKlein1 .blokwrap {
  height: 100%;
  width: 100%;
  background-color: #7E3878;
}

#blokKlein1 .bloktext {
  height: 100%;
  width: 100%;
  background-color: #FFF;
  color: #000;
}

#blokGroot {
  height: 100%;
  width: 50%;
  background-color: #2D89EF;
}
#blokMiddel {
  height: 50%;
  width: 50%;
  background-color: #1E7145;
}
#blokKlein1 {
  height: 50%;
  width: 25%;
  background-color: #7E3878;
}
#blokKlein2 {
  height: 50%;
  width: 25%;
  background-color: #DA532C;
}
.footer {
  height: 8%;
  box-sizing: border-box;
  color: white;
  background-color: #363636;
  font-family: "Raleway", sans-serif;
  text-align: center;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

<!--Dit laadt het Raleway lettertype: -->
<link href='https://fonts.googleapis.com/css?family=Raleway:200,300' rel='stylesheet' type='text/css'>

<!--Dit laadt jQuery: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>

<!--Dit laadt jQueryui: -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>


<!--Dit is de header: -->
<div class="menu">
  MAX
</div>


<!--Dit is alle inhoud emt de 4 vakken: -->
<div class="inhoud">

  <div class="blok" id="blokGroot">
    <a href="#" id="overMij-link">
      <img src="SVG/overMij.svg" alt="Over mij" height="150">
    </a>
  </div>

  <div class="blok" id="blokMiddel">
    <a href="#" id="informatica-link">
      <img src="SVG/informatica.svg" alt="Informatica" height="150">
    </a>
  </div>

  <div class="blok" id="blokKlein1">
    <div class="blokwrap">
      <a href="#" id="muziek-link">
        <img src="SVG/muziek.svg" alt="Muziek" height="150">
      </a>
    </div>
    <div class="bloktext">
        Some sample text...
    </div>
  </div>

  <div class="blok" id="blokKlein2">
    <a href="#" id="hobbies-link">
      <img src="SVG/hobbies.svg" alt="Hobbies" height="150">
    </a>
  </div>

</div>


<!--Dit is de footer: -->
<div class="footer">
  (c) 2015
</div>