Question

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

我曾尝试使用幻灯片切换但我的div目前位于我的标题页的底部，所以当它切换时，div垂直切换 - 而不是水平切换。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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/

根据您的需要修改代码。

如何在单击按钮时将<div>幻灯片放入视图中？

1 个答案: