jquery slideUp/Down功能只能在firefox中使用firebug;此外，懸停功能似乎並沒有工作

Question

我一直在搜索過去幾個小時的答案和很多類似的實例都顯示在計算器上，但沒有一個答案似乎適用於我。

只是真的想學習/使用JQuery作爲初學者/中級用戶，所以我希望我只是犯了一些簡單的錯誤。可能不會幫助我正在處理的頁面依賴於大約14個不同的z-index級別來獲得我想要的效果。

我試圖設計一個看起來有點像文件夾的組合。理想情況下，如果我將鼠標懸停在代表「藝術作品」的div上，則彩色空白矩形將從div後面向上滑動。如果我點擊，那麼一個新的頁面將加載一個更傳統的畫廊。

我試過兩種不同的方法，混合工作/非工作結果。下面是我的腳本標記看起來像頭部分：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
function showHiddenDivHover(thechosenone) { 
    $('div[name|="foliosheet"]').each(function(index) { 
     if ($(this).attr("id") == thechosenone) { 
      $(this).slideDown(600); 
     } 
     else { 
      $(this).slideUp(600); 
     } 
}); 
} 
function hideHiddenDivHover(thechosenone) { 
    $('div[name|="foliosheet"]').each(function(index) { 
    if ($(this).attr("id") == thechosenone) { 
      $(this).slideUp(600); 
     } 
     else { 
      $(this).slideDown(600); 
     } 
}); 
} 
$("#info").hover(function() { 
    $("#info-sheet").slideToggle("slow"); 
}); 
$("#artwork").hover(function() { 
    $("#artwork-sheet").slideToggle("fast"); 
}); 
</script> 

首先是基於一個例子，我從艾倫劉在randomsnippets.com教程找到。我將它設計爲在'a'標籤中使用onMouseOver（）和onMouseOut（）。這種方式很有效，因爲在堆棧頂部的第一個div運行良好，然後其他6個沒有;然而，如果我打開了firebug擴展，其餘的div開始顯示所需（主要）。

第二種技術是基於我在JQuery文檔中看到的東西，以及類似的問題，在stackoverflow和JSFiddle的例子（如http://jsfiddle.net/nick_craver/JcBAd/）。

下面是一些在體內的HTML的樣子：

<div id="artwork"><a href="#" onMouseOver="javascript:showHiddenDivHover('artwork-sheet')" onMouseOut="javascript:showHiddenDivHover()"> 
<img src="assets/transparent_long.png" alt="artwork" width="1200" height="35"></a></div> 
    <div name="foliosheet" id="artwork-sheet"></div> 

<div id="artwork"><div id="artwork-sheet"></div></div> 

而這裏的有關CSS的樣子：

#artwork { 
z-index: 170; 
position: absolute; 
height: 500px; 
background-repeat: no-repeat; 
overflow: hidden; 
top: 400px; 
width: 1200px; 
margin-left: 30px; 
border: 2px solid red; 
background-image:url(../assets/file_artwork.png); 
} 
#websites { 
background-repeat: no-repeat; 
overflow: hidden; 
position: absolute; 
z-index: 150; 
height: 500px; 
top: 360px; 
width: 1200px; 
margin-left: 30px; 
background-image:url(../assets/file_websites.png); 
} 
#threedmodels { 
z-index: 130; 
position: absolute; 
height: 500px; 
background-repeat: no-repeat; 
overflow: hidden; 
top: 320px; 
width: 1200px; 
margin-left: 30px; 
background-image:url(../assets/file_3dmodels.png); 
} 
#games { 
z-index: 110; 
position: absolute; 
height: 500px; 
background-repeat: no-repeat; 
overflow: hidden; 
top: 280px; 
width: 1200px; 
margin-left: 30px; 
background-image:url(../assets/file_games.png); 
} 
#movies { 
/* border: 2px solid red; */ 
z-index: 90; 
position: absolute; 
height: 500px; 
background-repeat: no-repeat; 
overflow: hidden; 
top: 240px; 
width: 1200px; 
margin-left: 30px; 
background-image:url(../assets/file_movies.png); 
} 
#flash { 
z-index: 70; 
position: absolute; 
height: 500px; 
background-repeat: no-repeat; 
overflow: hidden; 
top: 200px; 
width: 1200px; 
margin-left: 30px; 
background-image:url(../assets/file_flash.png); 
} 
#info { 
z-index: 50; 
position: absolute; 
height: 500px; 
background-repeat: no-repeat; 
overflow: hidden; 
top: 160px; 
width: 1200px; 
margin-left: 30px; 
background-image:url(../assets/file_info.png); 
} 
#artwork-sheet { 
width: 1100px; 
height: 100px; 
margin-left: 100px; 
background-color:#ff0000; 
display: none; 
position: absolute; 
bottom: 400px; 
z-index: 160; 
} 
#websites-sheet { 
width: 1100px; 
height: 100px; 
margin-left: 100px; 
background-color:#006F00; 
display: none; 
position: absolute; 
bottom: 360px; 
z-index: 140; 
} 
#threedmodels-sheet { 
width: 1100px; 
height: 100px; 
margin-left: 100px; 
background-color:#0000F5; 
display: none; 
position: absolute; 
bottom: 320px; 
z-index: 120; 
} 
#games-sheet { 
width: 1100px; 
height: 100px; 
margin-left: 100px; 
background-color:#E76000; 
display: none; 
position: absolute; 
bottom: 280px; 
z-index: 100; 
} 
#movies-sheet { 
width: 1100px; 
height: 100px; 
margin-left: 100px; 
background-color:#80A2AA; 
display: none; 
position: absolute; 
bottom: 240px; 
z-index: 80; 
} 
#flash-sheet { 
width: 1100px; 
height: 100px; 
margin-left: 100px; 
background-color:#AE21B1; 
display: none; 
position: absolute; 
bottom: 200px; 
z-index: 60; 
} 
#info-sheet { 
width: 1100px; 
height: 100px; 
margin-left: 100px; 
background-color:#0079D6; 
display: none; 
position: absolute; 
bottom: 160px; 
z-index: 40;  
} 

我知道這是怎樣的一個複雜的安排，但靜態圖像/ div正在按需顯示。我傾向於在我的小項目中走得很遠，但希望有人能伸出援手。

去年我玩過更多本土/修改過的代碼。如果有人感興趣，可以在http://www.authenticrubydesigns.com/portfolio看到。使用圓形佈局和旋轉，但有時處理速度太慢，而設計因爲限制了我。偶爾看一下新鮮的外觀沒什麼不對。

Answer 1

您可能想嘗試使用jQuery's animate function.這可能會使事情變得更加棘手，因爲您已經掌握了大量的CSS，並且您還可以通過在動畫對象內添加更多參數來操作它。

向上滑動：

$(this).animate({top: '-=50'},600,function(){ 
    //callback goes here 
}); 

滑下：

$(this).animate({top: '+=50'},600,function(){ 
    //callback goes here 
}); 

Answer 2

我並不完全確定一切是如何開始的準確工作，但我已經解決了我的基本問題。需要一些調整幫助，但我可能會爲此開始一個新的問題。

添加document.ready可能是一個好處。但真正的機械解決方案似乎是修改我的CSS和切換到/加載JQueryUI庫與「幻燈片」功能的組合。「slideToggle」也可能機械地工作，但它只是從頂部向下滑動，從而破壞了從文件夾中看到一張紙的僞效果。

在我的CSS中，我評論了我的「底部」定位。我認爲這真的是拋棄了這個地方。另外，我發現儘管爲*表格ID指定了一個Z索引級別，他們從父調用者繼承了它們的Z索引值。所以，我還必須修改我的HTML，以將位置放置在下一個div中的* -sheet div的文檔中，這將圖形放置在調用div的後面。

這裏是新的jQuery的代碼，我放在一起基於「幻燈片」 API：再次

$("#artwork").hover(function() { 
    $("#artwork-sheet").show("slide", { direction: "down" }, 1000); 
    $("#artwork-sheet").hide("slide", { direction: "down" }, 1000); 
}); 
$("#websites").hover(function() { 
    $("#websites-sheet").show("slide", { direction: "down" }, 1000); 
    $("#websites-sheet").hide("slide", { direction: "down" }, 1000); 
}); 
$("#threedmodels").hover(function() { 
    $("#threedmodels-sheet").show("slide", { direction: "down" }, 1000); 
    $("#threedmodels-sheet").hide("slide", { direction: "down" }, 1000); 
}); 
$("#games").hover(function() { 
    $("#games-sheet").show("slide", { direction: "down" }, 1000); 
    $("#games-sheet").hide("slide", { direction: "down" }, 1000); 
}); 
$("#movies").hover(function() { 
    $("#movies-sheet").show("slide", { direction: "down" }, 1000); 
    $("#movies-sheet").hide("slide", { direction: "down" }, 1000); 
}); 
$("#flash").hover(function() { 
    $("#flash-sheet").show("slide", { direction: "down" }, 1000); 
    $("#flash-sheet").hide("slide", { direction: "down" }, 1000); 
}); 
$("#info").hover(function() { 
    $("#info-sheet").show("slide", { direction: "down" }, 1000); 
    $("#info-sheet").hide("slide", { direction: "down" }, 1000); 
}); 

感謝您的幫助。我認爲這有助於我朝着正確的方向前進。另外，我在澳大利亞，所以我在午夜後寫作。也許睡眠休息也有點幫助。 :)

-Alan