使用jQuery滑动div屏幕 [英] Slide a div offscreen using jQuery

问题描述

这是一个挑战。这里是我要找的：

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到达右侧。

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

有任何想法吗？

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

-D

解决方案

这？

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

http：// jsfiddle。 net / jtbowden / ykbgT /

这是基本功能。它不会扩展到更多的div等，但这应该让你开始。

关键是将你的元素包装在一个容器，使溢出隐藏。 / p>

更新：

这里有一个略好的版本，可以处理任意数量的div大于1）：

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

进一步简化：

a href =http://jsfiddle.net/jtbowden/ykbgT/2/> http://jsfiddle.net/jtbowden/ykbgT/2/

This is a bit of a challenge. Here's what I'm looking for:

1. 3 divs on screen
2. Div 1 resides in the middle of the page (centered)
3. Div 2 resides just off the screen on the far left
4. Div 3 resides just off the screen on the far right
5. 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.

I've tried using jQuery animation and AddClass. jQuery doesn't like sliding a div offscreen.

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.

-D

解决方案

Something like this?

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

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

This is the basic functionality. It doesn't scale to more divs, etc, but that should get you started.

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):

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

Simplified further:

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

这篇关于使用jQuery滑动div屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！