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

我正在制作一个Windows8Metro风格的网站，当你点击其中一个方块时，它会弹出jquery.slideUp（）。当它向上滑动时，它旁边的正方形会跳到它的位置，这不是我想要的

$（文档）.ready（函数（）{
$（“.blok”）。单击（函数（）{
美元（此）.slideUp（1200，“easeOutBounce”）；
});
});
html，
身体{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
.菜单{
身高：8%；
框大小：边框框；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：白色；
背景色：#363636；
字体系列：“Raleway”，无衬线；
字体大小：50px；
}
英胡德先生{
身高：84%；
宽度：100%；
}
布洛克先生{
背景色：#EC1D25；
显示器：flex；
浮动：左；
溢出：自动；
对齐项目：居中；
证明内容：中心；
框大小：边框框；
颜色：白色；
文本对齐：居中；
字体大小：36px；
字体系列：“Raleway”，无衬线；
}
#块根{
身高：100%；
宽度：50%；
背景色：#2D89EF；
}
#布洛克米德尔{
身高：50%；
宽度：50%；
背景色：#1E7145；
}
#blokKlein1{
身高：50%；
宽度：25%；
背景色：#7E3878；
}
#blokKlein2{
身高：50%；
宽度：25%；
背景色：#DA532C；
}
.页脚{
身高：8%；
框大小：边框框；
颜色：白色；
背景色：#363636；
字体系列：“Raleway”，无衬线；
文本对齐：居中；
}

马克斯
（c） 2015年
每个
.blok
中都有一个包装器，在这里可以滑动
.wrapblok
而不是
.blok

要控制
.blokwrap
和
.bloktext
的显示，您可以使用
浮动：
或
位置：
，当您滑出图像时，文本可以向上滑动或只是“在后面”

CSS

HTML

html，
身体{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
.菜单{
身高：8%；
框大小：边框框；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：白色；
背景色：#363636；
字体系列：“Raleway”，无衬线；
字体大小：50px；
}
英胡德先生{
身高：84%；
宽度：100%；
}
布洛克先生{
背景色：#EC1D25；
浮动：左；
溢出：隐藏；
框大小：边框框；
颜色：白色；
文本对齐：居中；
字体大小：36px；
字体系列：“Raleway”，无衬线；
}
.blokwrap、.bloktext{
背景色：#EC1D25；
显示器：flex；
浮动：左；
溢出：自动；
对齐项目：居中；
证明内容：中心；
框大小：边框框；
颜色：白色；
文本对齐：居中；
字体大小：36px；
字体系列：“Raleway”，无衬线；
}
#blokKlein1.blokwrap{
身高：100%；
宽度：100%；
背景色：#7E3878；
}
#blokKlein1.bloktext{
身高：100%；
宽度：100%；
背景色：#FFF；
颜色：#000；
}
#块根{
身高：100%；
宽度：50%；
背景色：#2D89EF；
}
#布洛克米德尔{
身高：50%；
宽度：50%；
背景色：#1E7145；
}
#blokKlein1{
身高：50%；
宽度：25%；
背景色：#7E3878；
}
#blokKlein2{
身高：50%；
宽度：25%；
背景色：#DA532C；
}
.页脚{
身高：8%；
框大小：边框框；
颜色：白色；
背景色：#363636；
字体系列：“Raleway”，无衬线；
文本对齐：居中；
}

马克斯
一些示例文本。。。
（c） 2015年
每个
.blok
中都有一个包装器，在这里可以滑动
.wrapblok
而不是
.blok

要控制
.blokwrap
和
.bloktext
的显示，您可以使用
浮动：
或
位置：
，当您滑出图像时，文本可以向上滑动或只是“在后面”

CSS

HTML

html，
身体{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
.菜单{
身高：8%；
框大小：边框框；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：白色；
背景色：#363636；
字体系列：“Raleway”，无衬线；
字体大小：50px；
}
英胡德先生{
身高：84%；
宽度：100%；
}
布洛克先生{
背景色：#EC1D25；
浮动：左；
溢出：隐藏；
框大小：边框框；
颜色：白色；
文本对齐：居中；
字体大小：36px；
字体系列：“Raleway”，无衬线；
}
.blokwrap、.bloktext{
背景色：#EC1D25；
显示器：flex；
浮动：左；
溢出：自动；
对齐项目：居中；
证明内容：中心；
框大小：边框框；
颜色：白色；
文本对齐：居中；
字体大小：36px；
字体系列：“Raleway”，无衬线；
}
#blokKlein1.blokwrap{
身高：100%；
宽度：100%；
背景色：#7E3878；
}
#blokKlein1.bloktext{
身高：100%；
宽度：100%；
背景色：#FFF；
颜色：#000；
}
#块根{
身高：100%；
宽度：50%；
背景色：#2D89EF；
}
#布洛克米德尔{
身高：50%；
宽度：50%；
背景色：#1E7145；
}
#blokKlein1{
身高：50%；
宽度：25%；
背景色：#7E3878；
}
#blokKlein2{
身高：50%；
宽度：25%；
背景色：#DA532C；
}
.页脚{
身高：8%；
框大小：边框框；
颜色：白色；
背景色：#363636；
字体系列：“Raleway”，无衬线；
文本对齐：居中；
}

马克斯
一些示例文本。。。
（c） 2015年
我即将到达那里，只是没有Jquery函数

我已经尝试在div中嵌套一个绝对定位的div，但是所有函数都将外部和内部div显示设置为“none”

在这里，我添加了一个具有css可见性的类，它可以工作，只是不能用于动画。我试着在点击时添加一个css类，我试着用一个普通的JS代码来模拟slideToggle，但没有成功。
这几乎是一个解决方案，我知道整个Html是否会重新排列，但我被困在这里。这是一个开始
.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...
}

<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...

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


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

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