Javascript 使用 jQuery 在屏幕外滑动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4741880/
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
Slide a div offscreen using jQuery
提问by djreed
This is a bit of a challenge. Here's what I'm looking for:
这有点挑战。这是我要找的：
- 3 divs on screen
- Div 1 resides in the middle of the page (centered)
- Div 2 resides just off the screen on the far left
- Div 3 resides just off the screen on the far right
OnClick, Div 1 slides to the position Div 2 was (to the left), Div 2 slides off the screen entirely, Div 3 slides to where Div 3 was (middle, centered). A new div arrives on the right.
- 屏幕上有 3 个 div
- Div 1 位于页面中间（居中）
- Div 2 位于最左侧的屏幕外
- Div 3 位于最右侧的屏幕外
OnClick, Div 1 滑动到 Div 2 所在的位置（向左），Div 2 完全滑出屏幕，Div 3 滑动到 Div 3 所在的位置（中间，居中）。一个新的 div 出现在右侧。
I've tried using jQuery animation and AddClass. jQuery doesn't like sliding a div offscreen.
我试过使用 jQuery 动画和 AddClass。jQuery 不喜欢在屏幕外滑动 div。
Any thoughts?
有什么想法吗？
For an example of what I'm describing, visit Groupon.com. I thought it was a cool idea, and have given myself the challenge of recreating it. So far, no dice.
有关我所描述的示例，请访问Groupon.com。我认为这是一个很酷的想法，并给了自己重新创造它的挑战。到目前为止，没有骰子。
-D
-D
回答by Jeff B
Something like this?
像这样的东西？
http://jsfiddle.net/jtbowden/ykbgT/embedded/result/
http://jsfiddle.net/jtbowden/ykbgT/embedded/result/
http://jsfiddle.net/jtbowden/ykbgT/
http://jsfiddle.net/jtbowden/ykbgT/
This is the basic functionality. It doesn't scale to more divs, etc, but that should get you started.
这是基本功能。它不会扩展到更多 div 等，但这应该会让你开始。
The key is to wrap your elements in a container and make the overflow hidden.
关键是将您的元素包装在容器中并隐藏溢出。
Update:
更新：
Here's a slightly better version that handles any number of divs (greater than 1):
这是一个稍微好一点的版本，可以处理任意数量的 div（大于 1）：
http://jsfiddle.net/jtbowden/ykbgT/1/
http://jsfiddle.net/jtbowden/ykbgT/1/
Simplified further:
进一步简化：
http://jsfiddle.net/jtbowden/ykbgT/2/
http://jsfiddle.net/jtbowden/ykbgT/2/
Code snippet:
代码片段：
$('.box').click(function() {
$(this).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$(this).next().animate({
left: '50%'
}, 500);
});body {
padding: 0px;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 100px;
margin-left: -25%;
}
#box1 {
background-color: green;
left: 50%;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
}
#box4 {
background-color: orange;
}
#box5 {
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>
<div id="box5" class="box">Div #5</div>
</div>回答by sdleihssirhc
Maybe I misinterpreted. I though you wanted three divs in a row, and only the ones on the end sliding and whatnot.
也许我误解了。我虽然你想要连续三个 div，并且只有最后滑动的那些等等。
(I know you're using jQuery for this, but it pissed me off as I was trying to force it to work. You'd have to adapt this for your purposes.)
（我知道你为此使用了 jQuery，但是当我试图强迫它工作时它让我很生气。你必须根据你的目的调整它。）
回答by Alan CN
Extending Jeff Banswer, i've included Hammer.jsand made a circular list.
扩展Jeff B 的答案，我已经包含了Hammer.js并制作了一个循环列表。
$(function() {
$("#esq").click(function() {
console.log("Esquerda !");
var obj = $(".ativo");
$(obj).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '+150%');
$(this).appendTo('#container');
});
$(obj).next().animate({
left: '+50%'
}, 500, function() {
$(this).addClass('ativo');
$(obj).removeClass('ativo');
});
});
$("#dir").click(function() {
console.log("Direita !");
var obj = $(".ativo");
var prox = $(obj).siblings(":last");
$(obj).animate({
left: '+150%'
}, 500, function() {
$(prox).prependTo('#container');
});
$(prox).css('left', '-50%');
$(prox).animate({
left: '+50%'
}, 500, function() {
$(this).addClass('ativo');
$(obj).removeClass('ativo');
});
});
var hammertime = new Hammer(document.getElementById("container"));
hammertime.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL});
hammertime.on('swipeleft', function() {
$("#esq").trigger("click");
});
hammertime.on('swiperight', function() {
$("#dir").trigger("click");
});
});
});
Example in: http://jsfiddle.net/tvLt1r9h/2/
回答by Denny Smith
And... not a year too late. If you want it to start on the first div, your css needs to look like this.
而且……还不算晚。如果你想让它从第一个 div 开始，你的 css 需要看起来像这样。
#box1 { background-color:#333; }
#box2 { background-color:#333; left: -50%; }
#box3 { background-color:#333; left: 150%; }
#box4 { background-color:#333; left: 150%; }
#box5 { background-color:#333; left: 150%; }
