使用JQuery水平滑动div [英] Sliding divs horizontally with JQuery

问题描述

所以我对Javascript和Jquery非常陌生.我想创建一个两列页面，其中左列上的链接将导致右侧的div从左向右水平滑入，并在再次单击时滑出视图.我知道我需要使用幻灯片切换效果，但是我在实现它时遇到了麻烦，即每个单独的链接都会导致不同的div滑动...我试图调整一些通过Google搜索找到的jsfiddles，但是在使用javascript时，我感到很迷茫.

so I'm very new to Javascript and Jquery. What I'd like to create is a two column page where links on the left column will cause a div on the right to slide in horizontally from left to right, and slide out of view when clicked again. I know I need to use slide toggle effect but I'm having trouble implementing it in a way that each individual link causes a different div to slide... I've attempted to tweak a few jsfiddles I've found via google searches but I'm pretty lost when it comes to javascript.

到目前为止，这是我唯一能够成功调整的小提琴... http://jsfiddle.net/bridget_kilgallon/HAQyK/
但那些会垂直滑动，并在单击时加载所有div.

So far this is the only fiddle I've been able to tweak successfully... http://jsfiddle.net/bridget_kilgallon/HAQyK/
but those slide vertically, and load all the divs when clicked.

这是我为没有任何JavaScript的页面布局创建的小提琴... http://jsfiddle.net/bridget_kilgallon/NhanG/

Here's a fiddle I've created for the pagelayout I'd like without any javascript... http://jsfiddle.net/bridget_kilgallon/NhanG/

请帮助！ :) -Bridget

Please help! :) -Bridget

推荐答案

不幸的是，没有使用jQuery的现成的水平"幻灯片动画.除非您使用更大的包，例如jQuery UI.但我认为这不是必需的.

Unfortunately there is no ready made 'horizontal' slide animation with jQuery. Unless you go with bigger packages like jQuery UI. But I don't think that is needed.

您唯一需要做的就是创造性地使用jQuery中的 animate() 函数来实现一种效果.

The only thing you want is some creative use of the animate() function in jQuery to achieve an effect.

由于描述不明确，我不知道要选择哪一个，所以我为面板切换中的次要效果制作了两个示例:

I didn't know which one you'd want to go with since the description was vague so I made 2 examples for minor effects in panel switching:

http://jsfiddle.net/sg3s/rs2QK/-此幻灯片面板从左侧和右侧附近

http://jsfiddle.net/sg3s/rs2QK/ - This one slides panel open from the left and to close to the right

http://jsfiddle.net/sg3s/RZpbK/-面板从左向右滑动向右和向左，直到打开新的.

http://jsfiddle.net/sg3s/RZpbK/ - Panels slide open from left to right and close to the left befor opening the new one.

资源:

• http://api.jquery.com/animate/

您还无法使用纯CSS做到这一点.对过渡的支持是基本的，并且仅限于基于Webkit的浏览器.因此，由于您将需要jQuery巧妙地使用它，但在使用JS之前，仍然需要确保使用CSS设置尽可能多的样式.请注意，我不在JS中使用任何视觉样式/操作.

You can't do this with pure CSS, not yet anyways. The support for transitions is basic and limited to pretty much only webkit based browsers. So since you're going to need jQuery make smart use of it, but you still need to make sure you style as much as possible with css before you use the JS. Note that I don't use any visual styling / manipulations in my JS.

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