Question

我一直在谷歌搜索过去几个小时的答案，很多类似的实例已经出现在stackoverflow，但没有一个答案似乎适合我。

刚刚尝试学习/使用JQuery作为初学者/中级用户，所以我希望我刚刚犯了一些简单的错误。可能无助于我正在处理的页面依赖于大约14种不同的z-index级别来获得我想要的效果。

我正在尝试设计一个看起来有点像文件夹的产品组合。理想情况下，如果我将鼠标悬停在代表“艺术品”的div上，彩色空白矩形将从div后面向上滑动。如果我点击，那么新页面将加载更传统的图库。

我尝试了两种不同的方法，它们具有非常混合的工作/非工作结果。这是我的脚本标签在head部分中的样子：

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

第一个基于我在Allen Liu的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了，你也可以通过在animate对象中添加更多参数来操作它。

向上滑动：

$(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中，我评论了我的“底部”定位。我认为这真的是把这个地方扔掉了。另外，我发现尽管为* -sheet id指定了z-index级别，但它们仍然从父调用者继承了它们的z-index值。所以，我还必须修改我的HTML，将位置放在行中下一个div内的* -sheet div文档中，以图形方式将div放在调用div后面。

这是我基于“幻灯片”API放在一起的新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);
});

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

-Alan

jquery slideUp / Down函数只能在firefox中使用firebug;此外，悬停功能似乎不起作用

2 个答案: