Jquery 滑动面板(再次)

发布于 2024-12-20 17:45:24 字数 659 浏览 0 评论 0原文

这是上一个问题的后续...我得到了帮助来调整我的代码(感谢 akloboucnik),并以此为例:

http://jsfiddle.net/fE8ks/1/

上面的示例将我的代码更改为对元素宽度进行动画处理,从而产生“折叠”和“展开”类型的效果。

我决定需要对代码执行的是实际动画左边距以实现“滑动”效果。

我想要做的非常基本的例子可以在这里看到:

http://jsfiddle.net/wsb22/< /a>

所以基本上我想要实现的是它们两者的结合。我需要有几个 div(只是内容面板),它们通过与第一个 jsfiddle 示例类似的链接激活,但我需要通过第二个 jsfiddle 示例的方法对面板进行动画处理。

我需要有一些在页面加载时全部隐藏的 div,除了第一个,并且当单击其他链接时,当前内容面板将向左动画隐藏,单击的面板然后向右动画显示。我还需要它到当前面板处于活动状态的位置,当单击该面板链接时,它不会再次动画。

我希望这是有道理的,希望有人能给我指出正确的方向,因为我似乎无法理解这个问题。

谢谢!

This is a follow up on a previous question...I was helped out adapting my code (thanks akloboucnik), and have this as an example:

http://jsfiddle.net/fE8ks/1/

This example above changed my code to animating the elements width, therefore resulting in a "collapse" and "expand" type of effect.

What I've decided I need to do with the code is to actually animate the left margin to achieve a "sliding" effect.

The very basic example of what I'm trying to do can be seen here:

http://jsfiddle.net/wsb22/

So basically what I'm trying to achieve is a combination of them both. I need to have several divs (just content panels) that are activated by links similar to the first jsfiddle example, but I need to animate the panels by the method of the second jsfiddle example.

I need to have some divs which are all hidden when the page loads, except the first one, and when the additional links are clicked, the current content panel will animate left to be hidden and the panel clicked with then animate right to be shown. I also need it to where the current panel is active, when that panels link is clicked, it won't animate again.

I hope this makes sense, and hopefully someone can point me in the right direction, as I can't seem to wrap my head around this one.

Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

梅倚清风 2024-12-27 17:45:25

不确定您在寻找什么,但也许就是这样: http://jsfiddle.net/adeneo/fE8ks /4/

Not sure what your looking for, but maybe this is it : http://jsfiddle.net/adeneo/fE8ks/4/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文