动画/过渡全屏按钮父级，使父级兄弟姐妹滑到一边并消失

Question

我想做什么：
我正在尝试制作 3 个div 的动画，每个div 包含 1 个按钮。当单击其中一个按钮时，我希望包含它的div 滑动到全屏，而另外两个，即父级的兄弟姐妹，滑动到 0% 宽度并消失，作为一个漂亮、好看的动画。

什么不起作用：
似乎我无法使动画看起来流畅，两个消失的元素给我带来了很多问题，主要是因为 0% 宽度过渡不适合我。

我已经制作了一个包含我的问题的小提琴，并且有兴趣使这个过渡/动画尽可能流畅。

.HTML：

<div id="testpile" class="inner cover">
  <div id="buttons" class="buttons">
    <div class="col-md-4 rat">
      <h1>Rationelt</h1>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
      <button id="1" class="btn btn-group btn-default" role="button">Personligt</button>
    </div>
    <div class="col-md-4 emo">
      <h1>Emotionelt</h1>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
      <button id="2" class="btn btn-group btn-default" role="button">Personligt</button>
    </div>
    <div class="col-md-4 per">
      <h1>Personligt</h1>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
      <button id="3" class="btn btn-group btn-default" role="button">Personligt</button>
    </div>
  </div>
</div>

j查询：

$('.btn-group').on('click', function() {
  $(this).parent().toggleClass('fullscreen');
  $(this).parent().siblings().toggleClass('mast1');
  $(this).parent().siblings().fadeOut(250, function() {
    $(this).parent().siblings().css({
      "visibility": "hidden",
      display: 'block'
    });
  });
});

动画小提琴

我

宁愿没有立场：绝对;，因为它往往会弄乱我页面的其余部分。

Answer 1

我从你的js中删除了这部分

$(this).parent().siblings().fadeOut(250, function() {
    $(this).parent().siblings().css({
      "visibility": "hidden",
      display: 'block'
    });
  });

我不知道你为什么添加它或它在做什么？ 所以你的js在这里：

$('.btn-group').on('click', function() {
  $(this).parent().toggleClass('fullscreen');
  $(this).parent().siblings().toggleClass('mast1');
});

并为.mast1添加了overflow:hidden

.mast1 {
  width: 0%;
  overflow:hidden;
}

https://jsfiddle.net/IA7medd/77k8rrrm/4/