我不完全确定所有事情的准确开始，但我解决了我的基本问题。需要一些调整帮助，但我可能会为此开始一个新的问题。

添加document.ready可能是一个好处。但真正的机械解决方案似乎是修改我的CSS和切换到/加载JQueryUI库与幻灯片功能的组合。 slideToggle也可能机械地工作，但它只是从顶部向下滑动，从而破坏了从文件夹中看到一张纸的伪效果。

在我的CSS中，我评论了我的底部定位。我认为这真的是抛弃了这个地方。另外，我发现尽管为*表格ID指定了一个Z索引级别，他们从父调用者继承了它们的Z索引值。所以，我还必须修改我的HTML，将位置放在* -sheet div的文档中，放在下一个div的行内，它将图形放置在调用div的后面。

下面是基于slideAPI添加的新JQuery代码：

  $（＃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）; 
}）; 
 

再次感谢您的帮助。我认为这有助于我朝着正确的方向前进。另外，我在澳大利亚，所以我在午夜后写作。也许睡眠休息也有点帮助。 ：）

- 阿兰

I've been googling for the past couple of hours for an answer and a lot of similar instances have shown up at ***, but none of the answers seemed to work for me.

Just really trying to learn/use JQuery as a beginner/intermediate user so I'm hoping I've just made some simple error. Probably doesn't help that the page I'm working on relies on about 14 different z-index levels to get the effect I want.

I'm trying to design a portfolio that looks a little like a file folder. Ideally, if I hover over div representing, say, "artwork" a colored blank rectangle will slide up from behind the div. If I click, then a new page would be loaded with a more conventional gallery.

I've tried two different methods with very mixed working/non-working results. Here's what my script tags look like in the head section:

<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>

The first is based on an example I found in a tutorial from Allen Liu at randomsnippets.com. I designed it to work with an onMouseOver() and onMouseOut() in 'a' tags. It kind of worked, as in the first div on top of the stack worked well and then the other 6 did not; however, if I turned on the firebug extension, the rest of the divs started showing up as desired (mostly).

The second technique was based on stuff I saw in the JQuery documentation and in similar questions on *** and examples at JSFiddle (like http://jsfiddle.net/nick_craver/JcBAd/).

Here's what some of the HTML in the body looks like:

    <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>

And here's what the relevant CSS looks like:

#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;    
}

I know it's kind of a complicated arrangement, but the static images/divs are displaying as desired. I tend to go off the deep end in my little projects, but hopefully someone can lend a hand.

Last year I played around with more homegrown/modified code. That can be seen at http://www.authenticrubydesigns.com/portfolio if anyone's interested. Used circular layouts and rotation, but the processing is too slow at times, and the design as it is limits me. Nothing wrong with a fresh look once in a while.

I'm not entirely sure how everything started working exactly, but I've solved my basic problem. Need some tweaking help, but I'll probably start a new Question for that.

Adding document.ready might have been a benefit. But the real mechanical solution seems to have been a combination of modifying my CSS and switching to/loading the JQueryUI library with the "slide" functions. "slideToggle" may have worked mechanically as well, but it was only sliding from the top down which destroys the pseudo-effect of seeing a piece of paper rise out of the file folder.

In my CSS, I commented out my "bottom" positioning. I think that was really throwing the location off. Also, I found that despite designating a z-index level for the *-sheet ids, they were inheriting their z-index value from the parent caller. So, I also had to modify my HTML to place the location in the document of the *-sheet div inside the next div in line, which graphically placed the div behind the calling div.

Here's the new JQuery code I put together based on the "slide" 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);
}); 

Thanks again for your help. I think it helped push me in the right direction. Plus, I'm in Australia so I was writing after midnight. Maybe a sleep break helped a little too. :)

-Alan