У меня есть слайд влево/вправо и вправо/влево между двумя div, которые происходят одновременно.
Скрипка: https://jsfiddle.net/n8jyzys2/
Однако текущий переход выглядит примерно так (во время перехода элементы div находятся в разных строках):
Переход между слайдами 1 
Переход, который я хотел бы получить, подобен этому (Имейте оба div в одной строке одновременно во время перехода):
Переход между слайдами 2 
Любые идеи?
JS Кредит
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-код
<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>
Стиль
.mydiv {
background: green;
width: 100%;
height: 100px;
outline: 1px solid #f93;
}
