如何創建一個滑動開門效果

Question

我要找來創建jQuery的滑動打開的門的效果，它具有以下功能：

• 進入網頁和車門關閉
• 點擊一個鏈接和門向外滑動，在x軸
• 固定金額再次點擊同一鏈接，並密切

門我開始了在這裏的概念，它的偉大工程：

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

但意識到我想要的門滑過，而不是尺寸的縮小，使用功能類型在這裏看到：

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

，所以我想我在尋找什麼對於一些類型的 '動畫' 的功能：

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

這是LOGI C的功能，我想實現：

靜態：
背景：當門滑開的是顯露的圖像。
門左內：122px寬x 244px高，居中並偏移左-61px，z指數爲3.
門左外：122px寬x 244px高，居中並偏移左-151px，z-index 2.
門右內：122px寬x 244px高，居中和偏移右61px與Z指數3.
門右外：122px寬×244px高，居中和右偏移151px與Z指數2.

的onclick（所有這些功能發生在相同的時間）：在x軸-164px：上點擊
門左內x位置滑動。
點擊左門外x座標幻燈片：x軸上-74px。
點擊右側內部x位置幻燈片：x軸上164px。
點擊右門外x位置幻燈片：x軸74px。

這裏是什麼，我想實現的示意圖：

試圖代碼（目前沒有工作）

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

這裏是我的jsfiddle嘗試得到其中一扇門滑動 - 我想，一旦我知道如何讓其中一扇門滑動，我就可以將相同的邏輯應用於其他人。我也是jquery的相對newb。

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訪問元素。