jquery - 使用 JQuery 水平滑动 div

Question

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

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

这是我为我想要的页面布局创建的 fiddle ，没​​有任何 javascript... http://jsfiddle.net/bridget_kilgallon/NhanG/

请帮忙! :) -布里奇特

Answer 1

不幸的是，没有现成的“水平”幻灯片动画与 jQuery。除非你使用更大的包，比如 jQuery UI。但我认为没有必要。

您唯一想要的就是对 animate() 进行一些创造性的使用jQuery中的函数来实现效果。

由于描述含糊不清，我不知道您想要选择哪一个，因此我为面板切换中的微小效果制作了 2 个示例:

http://jsfiddle.net/sg3s/rs2QK/ - 此滑动面板从左侧打开并从右侧关闭

http://jsfiddle.net/sg3s/RZpbK/ - 面板从左向右滑动打开，并在打开新面板之前靠近左侧。

资源:

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

你不能用纯 CSS 来做到这一点，至少目前还不能。对转换的支持是基本的，并且几乎仅限于基于 webkit 的浏览器。因此，既然您将需要 jQuery，请巧妙地使用它，但您仍然需要确保在使用 JS 之前尽可能使用 css 进行样式设置。请注意，我在 JS 中没有使用任何视觉样式/操作。