jquery - Animation/Transition fullscreen button parent and make parent siblings slide to the side and 消失

Question

我正在尝试做的事情:
我正在尝试为 3 个 div 设置动画，每个 div 包含 1 个按钮。单击其中一个按钮时，我希望包含它的 div 滑动到全屏，而另外两个，即父级的 sibling ，滑动到 0% 宽度并消失，作为一个漂亮、好看的动画。

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

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

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>

jQuery:

$('.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'
    });
  });
});

Fiddle for animation

我不喜欢 no position: absolute;，因为它会弄乱我页面的其余部分。

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

并将 overflow:hidden 添加到 .mast1

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

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