使用JQuery水平滑动div

Question

所以我对Javascript和Jquery很新.我想要创建的是一个双列页面,其中左列的链接将导致右侧的div从左向右水平滑动,并在再次单击时滑出视图.我知道我需要使用幻灯片切换效果,但我无法以每个链接导致不同的div滑动的方式实现它...我试图调整我通过谷歌搜索找到的几个jsfiddles但是谈到javascript,我很丢失.

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

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

请帮忙!:) -Bridget

Answer 1

不幸的是,jQuery没有现成的'水平'幻灯片动画.除非你使用像jQuery UI这样更大的软件包.但我不认为这是必要的.

你唯一想要的是animate()在jQuery中创造性地使用函数来实现效果.

我不知道你想要哪一个,因为描述含糊不清所以我在面板切换中做了两个小效果示例:

http://jsfiddle.net/sg3s/rs2QK/ - 这个滑动面板从左侧打开并靠近右侧

http://jsfiddle.net/sg3s/RZpbK/ - 面板从左向右滑动,靠近左侧,打开新面板.

资源:

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

你不能用纯CSS做到这一点,不管怎样.对转换的支持是基本的,仅限于基于webkit的浏览器.所以,既然你需要jQuery聪明地使用它,但你仍然需要确保在使用JS之前使用css尽可能多地设置样式.请注意,我的JS中没有使用任何视觉样式/操作.