Question

我正在制作这个Windows 8地铁风格的网站，当你点击其中一个方块时，它会弹出jquery .slideUp（）。当它滑起时，它旁边的方块会跳进它的位置，这不是我想要的。

＆＃13;

{{Comment::join('threads', 'comments.tid', '=', 'threads.tid')->where('threads.cid', '=', $categorie->id)->orderBy('comments.posted_at', 'DESC')->first()->pluck('username')}}

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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>

Answer 2

我到了那里，只是没有Jquery功能。

我已经尝试在div中嵌套一个绝对定位的div，这些函数都将外部和内部div设置为＆＃34; none＆＃34;虽然。

这里我添加了一个具有css可见性的类，它可以工作，而不是动画。我试图在点击上添加一个css类，我尝试了一个vanilla JS代码模仿slideToggle，但没有运气。这有点接近一个解决方案，我会知道整个Html是否会被重新排列，但我会被困在这里。不过，这是一个开始。

http://codepen.io/damianocel/pen/KdeOpB

$(document).ready(function() {
$(".blok").click(function() {


$(this).toggleClass("newClass");
});
});

Answer 3

好的，这是有效的，但很少有问题。我添加了以下元素并将其放在视口之外：

#blokGroot2 {
position:absolute;
margin-left:-101%;
height: 100%;
width: 50%;
background-color: blue;
}

然后，单击其动画以使用animate方法向侧面飞入屏幕。

http://codepen.io/damianocel/pen/KdeOpB

这完全正常，其他div保持不变。

现在我已经添加了另一个div中等大小，并对它做同样的事情，它会按照预期做出反应，但它并没有完全放在原来的“blokmiddel”上，我不知道为什么到底。这两个小div并没有完全固定在底部。但这应该很容易解决。另一件事是，如果你点击blokmiddel，blookgrot也会淡出，这是一个我不确定如何解决的问题，也许传播/冒泡必须修复。我自己很好奇。

当div旁边的div被删除时，div继续移动

3 个答案: