顯示/隱藏與幻燈片左/右的動畫

Question

我試過這裏：http://jsfiddle.net/92HXT/1/但它不起作用。 它只適用於我使用show("slow")/hide("slow")。

謝謝。

Answer 1

雖然不是最銳利的動畫，但我已經通過找到父母並隱藏所有兄弟姐妹來使其行爲符合我的想法。我不確定爲什麼這會將元素向左滑動，而直接調用.siblings()似乎不是。

Seen here。

正如其他人所說，使用類來標識一組項目是正確的方法，而不是通過ID。

更新：

雖然我仍然不知道爲什麼兄弟姐妹（）未找到兄弟姐妹你通過ID找到了DIV，我懷疑它做的事顯示/隱藏或甚至可能使用滑動動畫的過程。這裏是我建議的jQuery/jQueryUI：

$('a.view-list-item').click(function() { 
    var divname= this.name; 
    $("#"+divname).show("slide", { direction: "left" }, 1000); 
    $("#"+divname).parent().siblings(":visible").hide("slide", { direction: "left" }, 1000); 
}); 

這是updated version。

更新：

的excellent update到該溶液通過@ jesus.tesh

更新：

甲behavior update由@erwinjulius該溶液中。 我改變了DIVs定位，使其表現更好，讓用戶在不破壞動畫的情況下快速點擊鏈接。 爲了更好的效果呈現，添加了白色背景和左側填充。

Answer 2

但是這個代碼的工作原理，在元素名稱標籤已經過時了W3C的standaards

我的ID不起作用試，後來我改變了名稱標籤標題和這個作品也和你符合W3C標準！

因此改變 「名稱」 爲 「標題」 這樣的，它的功能很大，在這裏看到：http://design65grafischontwerp.nl/#portfolio

$（文件）。就緒（函數（）{

$('a').click(function() { 
     var divtitle= this.title; 
     $("#"+divtitle).show("slow").siblings().hide(1000); 

    }); 

}）;