jquery slideUp / Down功能只能在firefox中使用firebug;此外，悬停功能似乎不起作用 [英] jquery slideUp/Down functions only work in firefox with firebug; also, hover function doesn't seem to work

问题描述

过去几个小时我一直在Google上搜索一个答案，并且很多类似的实例都出现在了stackoverflow上，但没有一个答案似乎适用于我。

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

我试图设计一个看上去有点像文件夹的投资组合。理想情况下，如果我将鼠标悬停在代表艺术作品的div上，则彩色空白矩形将从div后面向上滑动。如果我点击，那么新页面会加载一个更传统的画廊。

我尝试了两种不同的方法，其混合的工作/非工作结果。这是我的脚本标签在头部中的样子：

 < script type =text / javascriptsrc =js /jquery-1.7.2.min.js\"></script> 
< script type =text / javascript> 
函数showHiddenDivHover（thechosenone）{
 $（'div [name | =foliosheet]'）。each（function（index）{
 if（$（this）.attr（ id））== thechosenone）{
 $（this）.slideDown（600）; 
} 
 else {
 $（this）.slideUp（600）; 
} 
}）; 
 
函数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的Allen Liu教程中找到的示例。我将它设计为在'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.pngalt =artworkwidth =1200height =35>< / a>< / div> 
< div name =foliosheetid =artwork-sheet>< / div> 
 
< div id =artwork>< div id =artwork-sheet>< / div>< / div> 
  

以下是相关CSS的样子：

  #artwork {
 z-index：170; 
位置：绝对; 
 height：500px; 
背景重复：不重复; 
 overflow：hidden; 
 top：400px; 
 width：1200px; 
 margin-left：30px; 
 border：2px纯红色; 
 background-image：url（../ assets / file_artwork.png）; 
} 
 #websites {
 background-repeat：no-repeat; 
 overflow：hidden; 
位置：绝对; 
 z-index：150; 
 height：500px; 
 top：360px; 
 width：1200px; 
 margin-left：30px; 
 background-image：url（../ assets / file_websites.png）; 
} 
 #threedmodels {
 z-index：130; 
位置：绝对; 
 height：500px; 
背景重复：不重复; 
 overflow：hidden; 
 top：320px; 
 width：1200px; 
 margin-left：30px; 
 background-image：url（../ assets / file_3dmodels.png）; 
} 
 #games {
 z-index：110; 
位置：绝对; 
 height：500px; 
背景重复：不重复; 
 overflow：hidden; 
 top：280px; 
 width：1200px; 
 margin-left：30px; 
 background-image：url（../ assets / file_games.png）; 
} 
 #movies {
 / * border：2px纯红色; * / 
 z-index：90; 
位置：绝对; 
 height：500px; 
背景重复：不重复; 
 overflow：hidden; 
 top：240px; 
 width：1200px; 
 margin-left：30px; 
 background-image：url（../ assets / file_movies.png）; 
} 
 #flash {
 z-index：70; 
位置：绝对; 
 height：500px; 
背景重复：不重复; 
 overflow：hidden; 
 top：200px; 
 width：1200px; 
 margin-left：30px; 
 background-image：url（../ assets / file_flash.png）; 
} 
 #info {
 z-index：50; 
位置：绝对; 
 height：500px; 
背景重复：不重复; 
 overflow：hidden; 
 top：160px; 
 width：1200px; 
 margin-left：30px; 
 background-image：url（../ assets / file_info.png）; 
} 
＃图片表{
 width：1100px; 
 height：100px; 
 margin-left：100px; 
 background-color：＃ff0000; 
 display：none; 
位置：绝对; 
 bottom：400px; 
 z-index：160; 
} 
＃websites-sheet {
 width：1100px; 
 height：100px; 
 margin-left：100px; 
背景颜色：＃006F00; 
 display：none; 
位置：绝对; 
 bottom：360px; 
 z-index：140; 
} 
＃threedmodels-sheet {
 width：1100px; 
 height：100px; 
 margin-left：100px; 
背景颜色：＃0000F5; 
 display：none; 
位置：绝对; 
 bottom：320px; 
 z-index：120; 
} 
＃games-sheet {
 width：1100px; 
 height：100px; 
 margin-left：100px; 
背景颜色：＃E76000; 
 display：none; 
位置：绝对; 
 bottom：280px; 
 z-index：100; 
} 
＃movies-sheet {
 width：1100px; 
 height：100px; 
 margin-left：100px; 
背景颜色：＃80A2AA; 
 display：none; 
位置：绝对; 
 bottom：240px; 
 z-index：80; 
} 
＃flash-sheet {
 width：1100px; 
 height：100px; 
 margin-left：100px; 
背景颜色：＃AE21B1; 
 display：none; 
位置：绝对; 
 bottom：200px; 
 z-index：60; 
} 
＃info-sheet {
 width：1100px; 
 height：100px; 
 margin-left：100px; 
背景颜色：＃0079D6; 
 display：none; 
位置：绝对; 
 bottom：160px; 
 z-index：40; 
} 
  

我知道这是一种复杂的排列，但静态图像/ div是根据需要显示。我倾向于在我的小项目中走得很远，但希望有人能伸出援手。去年我使用了更多的本土/修改代码。如果有人感兴趣，可以在 http://www.authenticrubydesigns.com/portfolio 上看到。使用圆形布局和旋转，但有时处理速度太慢，而设计因为限制了我。偶尔会看到一个新面貌。

解决方案

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

添加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 stackoverflow, 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 stackoverflow 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

这篇关于jquery slideUp / Down功能只能在firefox中使用firebug;此外，悬停功能似乎不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！