链接以显示特定的div，以侧面动画入口（在父级内） [英] Linking to show specific divs, with animated entrance from the side (within a parent)

问题描述

我有一个问题涉及到一些jQuery和html / css。

我一直在研究侧滚动div，其中包含多个div，其中链接指的是其中一个较小的div（它们的入口应该是动画）。

我在网上找到了一些东西，类似于我想要的：
http://jsfiddle.net/NGL8P/21/
区别在于我想要一个按钮链接到一个特殊的div（但动画应该基本相同）。

这是我迄今为止所做的版本：
http://jsfiddle.net/jkUzF/2/
每一个重点都应该链接到其中一个div。有15个按钮，但我现在只制作了5个div。

我的主容器（包含所有可见的容器）称为： #mainsection
looong div（应该前后移动）被称为： #wrap
那些应该有15个的div被称为： .container

编辑1：
有人认为这是理解我想要的，所以我会尽量使它更清晰：

网站上有15个圆形按钮。他们每个人都应该链接到一个特定的DIV（目前包含一些Lorem ipsum）。这些DIV中的每一个都彼此排列在一起，但除非您更改溢出以滚动，否则无法看到它们。当我按下按钮时，我希望他们从侧面进来。例如，当我按下第1项下的第3个按钮时，我想让包含lorem ipsum的第三个div从侧面进入。当我按下第一个按钮时，我想让第一个Div从另一侧进入。一切都应该是动画的，当我跳过一个div（从第一跳到第三跳）时，我希望那些跳过（在这种情况下是第二节）的流程快速流动。是不是更好？

解决方案

我不知道发生了什么，但有人必须通过今晚的梦想与我说话，我醒了我就像：我必须尝试！

我的问题的答案是使用此代码：

  $（＃button）。click（function（）{
 $（'＃shit_that_moves'）。animate（{left： -  510px }，500）; 
}）; 
  

I have a problem related to some jQuery and html/css.

I've been working on a side scrolling div, containing several divs, where links refers to one of the "smaller" divs (their entrance should be animated).

I found something on the internet, similar to what I want: http://jsfiddle.net/NGL8P/21/ The difference is that I want one button to link to one special div (but the animation should be basically the same).

Here is my version of what I've done so far: http://jsfiddle.net/jkUzF/2/

Each of the bullet points should link to one of those divs. There are 15 buttons, but I only made 5 divs for now. The five divs are positioned after each other (they're not visible due to overflow: hidden).

My main container (which contains everything visible) is called: #mainsection The looong div (which should move forth and back) is called: #wrap Those divs that there should be 15 of are called: .container

EDIT 1: Someone thought it was to understand what I want, so I'll try to make it clearer:

There are 15 round buttons on the site. Each of them should link to one specific DIV (which currently contains some lorem ipsum). Each of these DIV's are lined up after each other, but you cannot see them unless you change overflow to scroll. I want them to come in from the side when i press the button. For example, when I press the 3rd button under "item 1" I want the third div containing lorem ipsum to enter from the side. When I press the 1st button, I want the first Div to enter from the other side. Everything should be animated, and when I "skip" a div (jumps from 1st to 3rd), I want those that I skip (in this case, nr 2) to just "flow" through fast. Was that better?

解决方案

I have no idea what happened, but someone must have spoken to me through the dream tonight, because when I woke up I was just like: "I have to try that!"

The answer to my question is to use this code:

$("#button").click(function() {
    $('#shit_that_moves').animate({left:"-510px"}, 500);
});

这篇关于链接以显示特定的div，以侧面动画入口（在父级内）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！