使用jQuery滑动div offscreen

这是一个挑战。 这是我正在寻找的东西：

1. 3屏幕上的div
2. Div 1驻留在页面的中间（居中）
3. Div 2位于最左边的屏幕之外
4. Div 3位于最右边的屏幕之外
5. OnClick ，Div 1滑动到Div 2位置（左边），Div 2完全滑出屏幕，Div 3滑动到Div 3所在的位置（中间，居中）。 新的div到达右边。

我试过使用jQueryanimation和AddClass。 jQuery不喜欢滑动div离屏。

有什么想法吗？

有关我所描述的示例，请访问Groupon.com 。 我认为这是一个很酷的想法，并给自己一个重新创造的挑战。 到目前为止，没有骰子。

-D

Answer 1

像这样的东西？

http://jsfiddle.net/jtbowden/ykbgT/embedded/result/

http://jsfiddle.net/jtbowden/ykbgT/

这是基本的function。 它不会扩展到更多的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> 

Answer 2

也许我误解了。 我虽然你想连续三个div，只有那些在结束滑动什么的。

http://jsfiddle.net/acsfy/

（我知道你正在使用jQuery来做这件事，但是当我试图强制它工作的时候，这让我很生气，你不得不为了你的目的而调整它）。

Answer 3

扩展杰夫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"); }); 

}）;

例如： http : //jsfiddle.net/tvLt1r9h/2/

Answer 4

而且……一年也不迟。 如果你想在第一个div开始，你的CSS需要看起来像这样。

     ＃box1 {background-color：＃333;  }
     ＃box2 {background-color：＃333; 剩下：-50％;  }
     ＃box3 {background-color：＃333; 左：150％;  }
     ＃box4 {background-color：＃333; 左：150％;  }
     ＃box5 {background-color：＃333; 左：150％;  }