Javascript 滑入滑出 div

Question

我正在尝试创建此站点的副本:

http://liko0312.wix.com/wildfireimages

我使用 CSS 使其从同一方向滑入和滑出，并以 100% 将 div 放在外面，然后以 0 将其引入，非常有切换效果。

但是，我试图让页面像在模型站点中一样滑入和滑出，但 CSS 不允许我这样做。我在 HTML/CSS 方面有很好的技能，但对 Javascript 的了解不多。到目前为止我找到了this fiddle ，但它是一个切换动画，而我需要它从右侧滑入并向左滑出，并且在它必须重置之后。另外，当前div滑出和下一个div滑入的动画必须同时进行。

这里是 Fiddle with code根据要求

.panel{
    width:0px;
    height:0px;
    overflow: hidden;
	position:relative;
    left:100%;
    background: none;
    z-index: 2;
	-moz-transition: all .8s ease-in-out, width 0s ease 1s, border-width 0s ease 1s;
    -webkit-transition: all .8s ease-in-out, width 0s ease 1s, border-width 0s ease 1s;
	-o-transition: all .8s ease-in-out,  width 0s ease 1s, border-width 0s ease 1s;
	transition: all .8s ease;
	transition-delay:0s;
	margin:0px;
	
}

.panel:target{
	width:100%;
	height:auto;
    margin:0px 0 0;
	padding:0;
    background-color: transparent;
	position:relative;
	left:0;
	z-index:3;
	
}

<div id="overall-wrap">
<!-- Header with Navigation -->

 <div id="header">
    <a href="#home"><img class="header" src="images/logo.png" width="133" height="86" alt="Wildfire Images"></a>
    <nav>
    <ul id="navigation">
        <li><a class="scroll" href="#home">Home</a></li>
        <li><a class="scroll" href="#about">About Us</a>
            <ul>
              <li><a class="scroll" href="#contact">Contact Us</a></li>
            </ul>
        </li>
    </ul>
    </nav>
    <div class="clearfix"></div>
</div>

 
<div class="clearfix"></div>

		

      <div id="home" class="panel"></div>

<!-- About Us -->
 
      <div id="about" class="panel">
          <div class="content">
              <div class="bg-about effect2">
              <div class="about-wrapper">
                <div class="about-text">
                <h2> About Us</h2>
                <p>Wildfire Images is a Sydney based boutique Portrait Photography Studio dedicated to candidly capturing all that is beautiful, fun and elegant about you and your loved ones.</p>
                <p>At Wildfire Images, we tailor every shoot to you, your trade mark smile, your rapturous laugh, your devotion to those you love, the cheeky, the serious and all those gorgeous things in between that will always be unmistakably you.</p>
                <p>Call us to start the story. You bring the characters and the stories and we'll take the photos that tell them.</p>
                <p class="strong">Contact us today on 9150 6275.</p>
                </div>
                <div class="about-image"><img src="images/aboutme.jpg" width="200" height="300" alt="WildFire Studios"></div>
              </div>
              </div>
              <!-- ... -->
          </div>
          <div class="clearfix"></div>
      </div>

<!-- /About Us -->

<!-- Contact -->

<div id="contact" class="panel">
    <div class="content">
        <div class="bg-contact effect2">
        <img src="images/contact-image.jpg" width="900" height="419" alt="Contact Wildfire"/>
        
       <div id="form-wrapper">
         <div id="form-outer">
         <div id="text-wrap">
           <div id="contact-left">
           <h2>Contact</h2>
           <div id="phone">
           <h3>Phone</h3><p>9150 6275</p></div>
           <div id="email">
           <h3>Email</h3><p>info@wildfireimages.com.au<p></div>
</div>
           <div id="contact-right"><h3>Address</h3><p>Studio 18,</p><p>442-444 King Georges Rd</p><p>BEVERLY HILLS NSW 2209</p></div>
           </div>
           <div class="clear"></div>
           <div id="form-inner">
           <form name="contact" action="contact.php" method="post" onBlur="MM_validateForm('name','','R','email','','RisEmail','subject','','R','message','','R');return document.MM_returnValue">
             <input name="name" type="text" class="field" id="name" placeholder="Name"/>
             <input name="email" type="email" class="field" id="email" placeholder="Email"/>
             <input name="subject" type="text" class="field" id="subject" placeholder="Subject" />
             <textarea name="message" class="field_textarea" id="message" placeholder="Message"></textarea>
             <input type="submit" value="Send" name="submit" class="submit"/>
           </form>
           </div>
         </div>
       </div>
          
        </div>
        <!-- ... -->
    </div>
</div>
<!-- /Contact -->

<!-- Portraits -->
<div id="portraits" class="panel">
    <div class="content">
       <div class="gallery-big effect2">
       <div id="gallery-big-text-wrap">
           <h2>Portraits</h2>
           <p>Call us to start the story. You bring the characters and the stories and we'll take the photos that tell them.</p>
           <p>Contact us today on 9150 6275.</p>
           </div>  
          <!--k gallery start-->
          <img src="images/baby-06-portrait-gallery.jpg" width="798" height="531">
           <img src="k/ki_galleries/all-about-me/AEP_0486.jpg" width="798" height="1200">
          <img src="k/ki_galleries/all-about-me/AEP_0653.jpg" width="798" height="1200">
          <img src="k/ki_galleries/all-about-me/DSC_0548.jpg" width="799" height="1200">
          <img src="k/ki_galleries/all-about-me/DSC_2652-edit.jpg" width="799" height="1200">
          <img src="images/family.jpg" width="798" height="532">
          <img src="k/ki_galleries/all-about-me/DSC_4052.jpg" width="799" height="1200">
        
      </div>
    </div>
</div>
<!-- /Portraits -->
</div>

此外，可以在 wixwebsite.seobrasov.com 上看到新网站

请注意，滑入和滑出应该适用于两个以上的 div，并且能够在不显示 div 2 的情况下从 tiv 1 跳到 div 3。

Answer 1

你可以尝试两件事-

1. 您可以使用基于 Jquery 的插件，例如 bxslider。你不需要学习 jquery。如果你仔细看的话，这是非常不言自明的。 http://bxslider.com/options

2. 您可以使用基于纯 CSS 3 的解决方案。这采用了 CSS 3 的过渡属性，并对其应用了缓入/缓出等变换功能。在此处查看演示 http://www.usabilitypost.com/2011/04/19/pure-css-slideout-interface/