-Animation/Transition Vollbild-Taste Eltern und machen Eltern Geschwister zur Seite schieben und verschwinden

Question

Was ich versuche:
Ich versuche 3 divs zu animieren jeweils 1-Taste. Wenn eine dieser Schaltflächen angeklickt wird, möchte ich, dass das div, das es enthält, auf Vollbild und die anderen beiden, dh die Geschwister des übergeordneten Elements, auf 0% Breite gleiten und als nette, gut aussehende Animation verschwinden.

Was nicht funktioniert:
Es scheint, dass ich nicht die Animation machen scheinen Flüssigkeit, die beiden verschwinden Elemente gibt mir eine Menge Probleme, vor allem bewirken, dass die 0% Breite Übergang für mich nicht funktioniert.

Ich habe eine Geige gemacht, die mein Problem enthält, und ich wäre sehr glücklich, wenn jemand es sehen würde und mir helfen würde herauszufinden, wie ich diesen Übergang/Animation so flüssig wie möglich mache.

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

ich keine Position vorziehen würde: absolute ;, wie es mein zu vermasseln neigt der Rest Seite.

Jede Hilfe, Tipps oder Ideen sind sehr willkommen, danke im Voraus!

Answer 1

entfernte ich diesen Teil von Ihrem js

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

Ich weiß nicht, warum Sie es hinzugefügt oder was es zu tun? so ist Ihre js hier:

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

und hinzugefügt overflow:hidden zu .mast1

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

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