这有点具有挑战性。以下是我所要求的：
OnClick，Div1向左滑动到Div2的位置，Div2完全滑出屏幕，Div3滑动到原来Div1的位置（中间，居中）。一个新的div出现在右边。我尝试使用jQuery动画和AddClass。jQuery不喜欢将div滑出屏幕。
有什么想法吗？
要了解我所描述的内容，请访问Groupon.com。我认为这是一个很酷的想法，并且已经给自己制造了挑战。目前还没有成功。
-D
这是一个类似的示例?
http://jsfiddle.net/jtbowden/ykbgT/embedded/result/
http://jsfiddle.net/jtbowden/ykbgT/
这是基本功能。它不能扩展到更多的div等，但这应该可以帮助您入门。
关键是将您的元素包装在一个容器中并将溢出隐藏。
更新：
这里有一个稍微更好的版本，可以处理任意数量的div（大于1）：
http://jsfiddle.net/jtbowden/ykbgT/1/
进一步简化：
http://jsfiddle.net/jtbowden/ykbgT/2/
代码片段：
$('.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>document.getElementById()！ - Jeff B$(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");
});
});