jQuery的效果基本show /下功能只在Firefox使用Firebug工作; 同时，悬停功

2019-10-16 15:25发布

站内文章 / 后端开发
49 0 0

我已经在过去的一个答案和很多类似的例子的时间在谷歌搜索计算器显示，但没有一个答案似乎为我工作。

只是真的想学习/使用JQuery作为初级/中级用户，所以我希望我刚刚做了一些简单的错误。 可能没有帮助，我的工作页面依赖于约14种不同的z-index水平得到我想要的效果。

我试图设计一个投资组合，看起来有点像一个文件夹。 理想的情况是，如果我将鼠标悬停在代表格，说：“艺术品”的彩色空白矩形将从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教程找到。 我把它设计与的onMouseOver（）和onmouseout（）工作在“A”的标签。 这样的工作，如在堆栈顶部的第一个div运作良好，那么其他6没有; 然而，如果我打开萤火虫扩展的div的其余部分开始示出作为期望的（主要）向上。

第二种技术是基于东西我jQuery的文档中看到的和在的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的动画功能。 这可能会使事情不太靠谱，因为你已经得到了很多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，我评论了我的“底部”的定位。 我认为这是真的扔的位置了。 另外，我发现，尽管指定的z-index水平，为*折叠IDS，他们从父母继承呼叫者的z-index的值。 所以，我也不得不修改我的HTML放置在线上的下一个DIV，这生动地放置在div呼叫背后的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



文章来源: jquery slideUp/Down functions only work in firefox with firebug; also, hover function doesn't seem to work
标签： jquery hover firebug z-index slidetoggle
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~