我正在尝试设置http://www.queness.com/post/1854/the-easiest-javascript-sliding-door-effect-tutorial-with-jquery
上的Javascript滑动门效果我想添加一个额外的静态图像，它将位于垂直滑动图像的顶部（此图像将是动画垂直滑动门图像的框架。我尝试使用z-为框架创建div类索引高于滑动图像div，但无法达到效果。
以下是当前代码：
<script>
$(document).ready(function() {
//if mouse over and mouse out
$('.eff').hover(
function () {
value = $(this).find('img').outerHeight() * -1;
//for left/right if you have different width and height,
//commented out because we are using up/down in this example
//value = $(this).find('img').outerWidth() * -1);
//animate the image
// you can change the sliding direction by changing bottom to left, right or top
// if you changed this, you will have to change the position of the hover out as well
$(this).find('img').stop().animate({bottom: value}
,{duration:500,easing:'easeInOutQuad'});
},
function () {
//reset the image
// the position property (bottom), it must be same with the on in the mouseover
$(this).find('img').stop().animate({bottom:0} ,
{duration:500, easing: 'easeOutBounce'});
});
//if user clicked on the thumbnail
$('.eff').click(function () {
//grab and execute the first link in the thumbnail
window.location = $(this).find('a:first').attr('href');
});
});
</script>
<style>
body {font-family:arial;}
.eff {
/* the image size is 126x126, it's adjusted to fit the border as well*/
width:325px;
height:260px;
/* important, allow the children object to move inside its parent obj */
position:absolute;
top:0;
left:0;
/* important, it hides the moved image */
overflow:hidden;
/* with the clear class, make it into 3 x 3 layout */
/* IE float bug fix */
display:inline;
/* styling */
margin:8px;
font-size:12px;
}
.eff img {
display:inline;
width:325px;
height:260px;
/* important, it allows this obj to move by jquery */
position:absolute;
/* make sure it appears above the caption */
z-index:5;
cursor:pointer; cursor:hand;
}
.eff .caption img {
/* should be the same size with the image */
width:325px;
height:260px;
/* set the position to 0, 0 and appear under the image */
position:absolute;
top:0; left:0;
z-index:0;
}
.clear {clear:both}
#hover_container {
display:inline;
width:345px;
height:280px;
background:url(frame.png);
}
</style>
</head>
<body>
<div id="hover_container">
<img src="frame.png" alt="Test 1" title="" width="345" height="280" />
<div class="eff">
<img src="example.jpg" alt="Test 1" title="" width="325" height="260" />
<div class="caption"><img src="example2.jpg" alt="Test 1" title=""
width="325" height="260" /></div>
</div>
</div>
<p id="debug"></p>
</body>
</html>