幻灯片的左，右过渡

Question

我有一个幻灯片左/右和右/左两个div之间的过渡同时发生。

小提琴：https://jsfiddle.net/n8jyzys2/

然而当前的转变看起来有点像这样 （的div是在不同的行中的过渡期间）：

幻灯片过渡1

The tra nsition我想实现的是类似这样（有在过渡同时在同一行两个div的）：

幻灯片切换2

任何想法？

---

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代码

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

Answer 1

这个CSS添加到您的网页：

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

希望我帮忙;）