0

幅 100%、高さ 100vh の背景壁紙を持つページがあります。ページには 3 つのボタンがあり、そのうちの 1 つが画面の左端にあります。そのボタンをクリックすると、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>

4

1 に答える 1

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/

必要に応じてコードを変更します。

于 2016-10-24T15:40:43.303 に答える