Question

我想做什么：
我试图动画3个div，每个包含1个按钮。单击其中一个按钮时，我希望包含它的div滑动到全屏，另外两个，即父级的兄弟，滑动到0％宽度并消失，作为一个漂亮，漂亮的动画。 / p>

什么行不通：
似乎我不能让动画看起来流畅，两个消失的元素给了我很多问题，主要是因为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>

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

我更喜欢没有位置：绝对;因为它往往会弄乱我页面的其余部分。

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/

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

1 个答案: