如何创造一个滑动门打开效果

Question

我希望用jquery创建一个具有以下功能的滑动打开门效果：

• 到达页面并关闭门
• 单击链接，门在x轴上向外滑动固定量
• 再次点击相同的链接并关闭门

我从这里开始使用这个概念，效果很好：

http://buildinternet.com/2009/07/animate-curtains-opening-with-jquery/

但是我意识到我希望使用这里看到的功能类型来滑动门，而不是缩小尺寸：

http://ricostacruz.com/jquery.transit/

所以我认为我正在寻找的是某种类型的“动画”功能：

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

这是我想要实现的功能的逻辑：

静态：
背景：门滑开时显示的图像 门左内：122px宽x 244px高，居中和偏移左-61px与z-index 3.
门左外：122px宽x 244px高，居中和偏移左-151px与z-index 2.
门右内：122px宽x 244px高，居中和偏移右61px与z指数3 门右外：122px宽x 244px高，居中和偏移右151px与z-index 2.

onclick （所有这些功能同时发生）：
点击左门内侧x位置滑动：x轴上为-164px 门 - 左 - 外x-位置滑动点击：x轴上-74px 门 - 右 - 内x-位置滑动点击：x轴上164px 门 - 右 - 外x-位置滑动点击：x轴上74px。

这是我想要实现的图表：

尝试代码（目前尚未正常工作）

$("#open_close_doors").click(function(){ $("#leftdoor_inner").animate({"left": "-=50px"}, "slow");});​

这是我的jsfiddle尝试让其中一扇门滑动 - 我知道如果我知道如何让其中一扇门滑动，我将能够将相同的逻辑应用于其他人。我也是jquery的新手。

http://jsfiddle.net/9zsdN/

谢谢你。

Answer 1

以下是更正后的jsFiddle：http://jsfiddle.net/9zsdN/1/

$("#open_close_doors").click(function(){ $("#leftdoor_inner").animate({"left": "-=50px"}, "slow");});​

应该是：

$(".open_close_doors").click(function(){
  $("#leftdoor_inner").animate({"left": "-=50px"}, "slow");
});​

区别在于您访问元素的方式。如您所见，当您按类访问元素时，您使用“.classsname”而不是“ #classname ”。

“#name”用于按ID访问元素。