问题
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.
回答1:
You may want to try using jQuery's animate function. It might make things less tricky since you've got a lot of CSS going on, and you can manipulate it as well by adding more parameters inside the animate object.
slide up:
$(this).animate({top: '-=50'},600,function(){
//callback goes here
});
slide down:
$(this).animate({top: '+=50'},600,function(){
//callback goes here
});
回答2:
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
来源：https://stackoverflow.com/questions/10260022/jquery-slideup-down-functions-only-work-in-firefox-with-firebug-also-hover-fun