Can't get jQuery to slide behind an image
So I'm trying to have an effect that when you click on an image, two more images (stored in #sharebar) will slide out from the left. The issue is currently when the images slide out, they slide from the left under the button, and then shift up after the animation is complete. I would like everything to be on the same level the whole time, so that the images appear to slide out from behind.
Can anyone help me out? Here's what I have:
<script>
$(function() {
// run the currently selected effect
function slideOut() {
var options = {};
$("#sharebar").toggle("slide", options, 500, callback() );
};
function callback() {
};
// set effect from select menu value
$( "#download_link" ).click(function() {
slideOut();
return false;
});
$("#sharebar").hide();
});
</script>
</head>
<body>
<div style="mar开发者_StackOverflow中文版gin:200px;min-height:10px;background:#e9e9e9;overflow:hidden;">
<img id="download_link" src="Download.png" style="z-index:2;"/>
<span id="sharebar" style="width:20px;z-index:1;">
<img id="exercise_link" src="exercises.png" />
<img id="subtitles_link" src="subtitles.png" />
</span>
Thanks in advance! :)
EDIT: I think this may have to do with z-index, but I'm not quite sure
I would definitely say z-index is going to be the way to go. It looks like you have some z-index things set already; just fix your z-index so the images layer on top of each other like you want them to.
<img id="download_link" src="Download.png" style="z-index:2;"/>
<span id="sharebar" style="width:20px;z-index:0;">
<img id="exercise_link" src="exercises.png" style="z-index:1" />
<img id="subtitles_link" src="subtitles.png" style="z-index:1" />
Just as a side-note: You're better off sticking these style attributes in a CSS document, rather than putting them in your HTML markup.
Setting the "top" element to have style="position:fixed" fixed the problem!
EDIT: Haha not sure why there's a downvote, it ended up fixing the problem.... :P
加载中,请稍侯......
精彩评论