Slide divs linken und rechten Übergang

Question

Ich habe einen Schieberegler links/rechts und rechts/links Übergang zwischen zwei Divs, die gleichzeitig auftritt.

Fiddle:https://jsfiddle.net/n8jyzys2/

jedoch der Stromübergang dieser etwas aussieht (Die divs sind in unterschiedlichen Reihen während des Übergangs):

Folienübergang 1

Der tra nsition ich möchte ist ähnlich wie diese erreichen (Haben beide divs in der gleichen Zeile gleichzeitig während des Übergangs):

Slide Transition 2

Irgendwelche Ideen?

---

JS Credit

jQuery.fn.extend({ 

    slideRightShow: function() { 
    return this.each(function() { 
     $(this).show('slide', {direction: 'right'}, 1000); 
    }); 
    }, 
    slideLeftHide: function() { 
    return this.each(function() { 
     $(this).hide('slide', {direction: 'left'}, 1000); 
    }); 
    }, 
    slideRightHide: function() { 
    return this.each(function() { 
     $(this).hide('slide', {direction: 'right'}, 1000); 
    }); 
    }, 
    slideLeftShow: function() { 
    return this.each(function() { 
     $(this).show('slide', {direction: 'left'}, 1000); 
    }); 
    } 

}); 

$("#slide_two_show").click(function() { 

    $("#slide_one_div").slideLeftHide(); 
    $("#slide_two_div").slideRightShow(); 

}); 

$("#slide_one_show").click(function() { 

    $("#slide_one_div").slideLeftShow(); 
    $("#slide_two_div").slideRightHide(); 

}); 

HTML-Code

<div> 

    <div id="slide_one_div"> 
     <br> 
     <div class="mydiv"> 
      <h1>Slide 1 (Left Slide)</h1> 
      <p>...</p> 
      <button id="slide_two_show">Show Slide 2</button> 
     </div> 
    </div> 

    <div id="slide_two_div" style = "display:none"> 
     <br> 
     <div class="mydiv"> 
      <h1>Slide 2 (Right Slide)</h1> 
      <p>...</p> 
      <button id="slide_one_show">Show Slide 1</button> 
     </div> 
    </div>   

</div> 

Stil

.mydiv { 
    background: green; 
    width: 100%; 
    height: 100px; 
    outline: 1px solid #f93; 
} 

Answer 1

Fügen Sie diese CSS auf Ihre Seite:

#slide_one_div { 
    position: absolute; 
    width: 100%; 
} 

Ich hoffe, ich half;)