javascript Javascript滑入滑出div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21775617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript slide in slide out div
提问by naty1982
I'm trying to create a replica of this site:
我正在尝试创建此站点的副本：
http://liko0312.wix.com/wildfireimages
http://liko0312.wix.com/wildfireimages
I've made it to slide in and out from the same direction using CSS and placing the div outside with 100% and then bringing it in with 0, very much a toggle effect.
我已经使用 CSS 让它从同一方向滑入和滑出，并将 div 以 100% 放置在外面，然后将其以 0 带入，这是一种非常切换效果。
However, I'm trying to make the pages slide in and out just like in the model site but CSS does not allow me to. I have good skills with HTML/CSS but am low on Javascript. So far I found this fiddle, but it's a toggle animation while I need it to slide in from the right and slide out to the left and after it has to reset. Also, the animation of the current div sliding out and the next div sliding in have to be in the same time.
但是，我试图让页面像在模型站点中一样滑入和滑出，但 CSS 不允许我这样做。我在 HTML/CSS 方面有很好的技能，但对 Javascript 的了解很少。到目前为止，我找到了这个小提琴，但它是一个切换动画，而我需要它从右侧滑入并滑出到左侧，然后必须重置。另外，当前 div 滑出的动画和下一个 div 滑入的动画必须在同一时间。
Here is Fiddle with codeas requested
这是按要求提供代码的 Fiddle
.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>[email protected]<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>Also, the new site can be seen at wixwebsite.seobrasov.com
此外，新网站可以在 wixwebsite.seobrasov.com 上看到
Please note that the slide in and out should work for more than two divs and be able to jump from tiv 1 to div 3 without showing div 2.
请注意，滑入和滑出应该适用于两个以上的 div，并且能够从 tiv 1 跳转到 div 3 而不会显示 div 2。
回答by DhruvJoshi
You could try two things-
你可以尝试两件事——
You can use Jquery based plugin like bxslider. You do not need to learn jquery. It's pretty self explanatory if you look carefully. http://bxslider.com/options
You can use a pure CSS 3 based solution. This employs transition property of CSS 3 with transformation function like ease-in/ease-out applied to them. See a demo here http://www.usabilitypost.com/2011/04/19/pure-css-slideout-interface/
您可以使用基于 Jquery 的插件，例如 bxslider。你不需要学习jquery。如果你仔细看，它是不言自明的。http://bxslider.com/options
您可以使用基于纯 CSS 3 的解决方案。这采用了 CSS 3 的过渡属性，并对其应用了缓入/缓出等转换功能。在此处查看演示http://www.usabilitypost.com/2011/04/19/pure-css-slideout-interface/
回答by David
You can do this by using two divs: one to handle the page shown, and one to handle the page to be loaded.
您可以通过使用两个 div 来做到这一点：一个处理显示的页面，一个处理要加载的页面。
When you click a link, simply animate the current page to the left and set it's css to be to the right when the animation is finished:
当您单击链接时，只需将当前页面设置为左侧的动画，并在动画完成时将其 css 设置为右侧：
$("#page1").stop().animate({
left:"-100%"
}, 500, function(){
$(this).css("left", "100%");
});
$("#page2").stop().animate({
left:"10%"
}, 500);
Basic JSFiddle
基本的 JSFiddle
JSFiddle using 3-page menu
使用 3 页菜单的 JSFiddle
回答by Totty.js
Check this update: JS Fiddle updated!(http://jsfiddle.net/jPneT/2705/)
检查此更新：JS Fiddle 已更新！( http://jsfiddle.net/jPneT/2705/)
- Uses 3 views
- you have a default view
- Easy methods to navigate.
- 使用 3 个视图
- 你有一个默认视图
- 导航的简单方法。
Js file:
js文件：
$(document).ready(function(){
var currentPageI = -1;
var pages = [
$('div.l1'),
$('div.l2'),
$('div.l3'),
];
var viewsWidth = 200;
var showPage = function(index){
if(index === currentPageI){return;}
var currentPage = pages[currentPageI];
if(currentPage){
currentPage.stop().animate({left: -viewsWidth})
}
var nextPage = pages[index];
nextPage
.stop()
.css({left: viewsWidth})
.animate({left: 0})
currentPageI = index;
}
// show default page
showPage(0);
$('a.l1').click(showPage.bind(null, 0));
$('a.l2').click(showPage.bind(null, 1));
$('a.l3').click(showPage.bind(null, 2));
$('.left-right').mouseover(function(){
$('.slider').stop().animate({
right: 0
}, 400);
}).mouseout(function(){
$('.slider').stop().animate({
right: '-200px'
}, 400);
});
});
HTML:
HTML：
<a class="l1">1</a><a class="l2">2</a><a class="l3">3</a>
<div class="left-right">
<div class="l1">L1 view</div>
<div class="l2">L2 view</div>
<div class="l3">L3 view</div>
</div>
CSS:
CSS：
.left-right {
overflow:hidden;
height:200px;
width:200px;
position:relative;
background-color:#333;
clear: left;
}
div.l1,div.l2,div.l3 {
width:200px;
height:200px;
position:absolute;
top:0;
right:-200px;
color:#fff;
}
a.l1,a.l2,a.l3 {
display: block;
width: 50px;
height: 50px;
float: left;
cursor: pointer;
opacity: 0.6;
}
a:hover {
opacity: 1
}
.l1{
color: red;
background-color:red;
}
.l2{
color: green;
background-color:green;
}
.l3{
color: blue;
background-color:blue;
}
回答by Shaik Mahaboob Basha
Updated your code a little bit to suport the required navigation
稍微更新了您的代码以支持所需的导航
I have added a wrapper around the divs which shows only one box at a time.
我在 div 周围添加了一个包装器，一次只显示一个框。
<div id="mainbox">
<div class="left-right">
<div class="red box">Red Div !</div>
<div class="green box">Green Div !</div>
</div>
</div>
The CSS is like this
CSS是这样的
#mainbox {
height:200px;
width:200px;
overflow:hidden;
}
Then I changed its left positions to -100% on mouse over and reverted to 0 on mouse out.
然后我在鼠标悬停时将其左侧位置更改为 -100%，并在鼠标移出时恢复为 0。
$(document).ready(function(){
$('.left-right').mouseover(function(){
$('.left-right').stop().animate({
left: '-100%'
}, 400);
}).mouseout(function(){
$('.left-right').stop().animate({
left:'0'
}, 400);
});
});
