javascript - 我如何制作一个单击按钮时滑入视图？

Question

我有一个具有 100% 宽度和 100vh 高度的背景壁纸的页面。该页面上有 3 个按钮，其中一个按钮位于屏幕的最左侧。当我单击该按钮时，我希望 div 会向右滑动以覆盖整个页面。

我曾尝试使用滑动切换，但我的 div 当前位于标题页的底部，因此当它切换时，div 会垂直切换，而不是水平切换。

我的标题页是 100vh，但我试图滑入到位的 div 没有固定高度。

#title {
  width: 100%;
  background-image: url(../Images/Arthur%20and%20Merlin%202%20updated.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100vh;
  position: relative;
  display: inline-block;
}
#characters {
  width: 100%;
  display: inline-block;
}

<div id="maincontainer">
  <header id="title">
    <h1>Arthur and Merlin</h1>
    <h3>Battle For Camelot</h3>
    <div id="titlebutton"><a href="#">Join The Battle</a>
    </div>
    <input id="checkboxforplaces" type="checkbox">
    <label id="toplaces" for="checkboxforplaces">
      <img src="Icons/castle.png">
    </label>
    <input id="checkboxforchar" type="checkbox">
    <label id="tocharacters" for="checkboxforchar">
      <img src="Icons/helmet.png">
    </label>
  </header>
  <section id="characters">
    <div id="firstrow">
      <article id="arthurbox">
        <a id="arthur" href="#">
          <img src="Images/Arthur/Arthur%201.jpg" </a>
      </article>
      <article id="merlinbox">
        <a id="merlin" href="#">
          <img src="Images/Merlin/merlin%202.jpg">
        </a>
      </article>
    </div>
    <div id="clear"></div>
    <div id="secondrow">
      <article id="morganabox">
        <a id="morgana" href="#">
          <img src="Images/Morgana/Morgana1.jpg">
        </a>
      </article>
      <article id="youngmordredbox">
        <a id="youngmordred" href="#">
          <img src="Images/YoungMordred/Mordred2.jpg">
        </a>
      </article>
    </div>
    <div id="clear"></div>
    <div id="thirdrow">
      <article id="utherbox">
        <a id="uther" href="#">
          <img src="Images/Uther/Uther.jpg">
        </a>
      </article>
      <article id="gaiusbox">
        <a id="gaius" href="#">
          <img src="Images/Gaius/Gaius-15hdg5a.jpg">
        </a>
      </article>
      <div id="clear"></div>
    </div>
  </section>
</div>

Answer 1

我认为这个 jsfiddle 可能对你有用。

$(document).ready(function(){    
$('#hide').click(function(){
    var hidden = $('.hidden');
    hidden.hide('slide', {direction: 'left'}, 400);
});

$('#show').click(function(){
    var hidden = $('.hidden');
    hidden.show('slide', {direction: 'left'}, 400);
});

});

https://jsfiddle.net/ZQTFq/3372/

根据您的需要修改代码。