Question

我目前有两张图片“IMAGE A”和“IMAGE B”。到目前为止，我的目的是淡入图像A，然后在其后面淡入图像B（同时保持在页面中心）。然而，相反，IMAGE B似乎正在推动图像A出现。我正在使用z-index，但我可能做错了，因为它还没有完全解决。

在图像B消失后，正确地我也想将它滑到图像A的正上方。感谢您的帮助！

IMAGE A

IMAGE B

我附上了一个jsfiddle来更好地演示正在发生的事情：http://jsfiddle.net/YQwZ6/

HTML：

<style type="text/css">
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript">

</script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#pocket').hide().delay(1000).fadeIn(3000).delay(2000);
    $('#pop').hide().delay(1000).fadeIn(8000).delay(2000);

});
</script>
<body>
<center>
    <div id="pics" align="center">
        <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td valign="middle" align="center">
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td height="200">
                                <center>
                                    <div id="pocket" style="z-index:5000"><a><img src="http://www.cjboco.com/assets/page-extras/cj-flashy-slideshow/image_a.jpg"/></a>

                                    </div>
                                    <div id="pop" style="z-index:100"><a><img src="http://www.cjboco.com/assets/page-extras/cj-flashy-slideshow/image_b.jpg"/></a>

                                    </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>

CSS：

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFFFFF;
background-repeat: repeat;
color: #333366;
}
#pocket, #pop {
position:relative;
display: none;
float:center;
}
#pics {
}

Answer 1

更改此

$('#pocket').hide().delay(1000).fadeIn(3000).delay(2000);
$('#pop').hide().delay(1000).fadeIn(8000).delay(2000);

到此

$('#pocket').hide().delay(1000).fadeIn(8000).delay(2000);
$('#pop').hide().delay(1000).fadeIn(3000).delay(2000);

这个

#pocket, #pop {
position:relative;

到此

#pocket, #pop {
position:absolute;
left: 0;
top: 0;

现在，只需将图像定位在您希望它们出现的位置即可。如果需要居中，请在相对定位的DIV内使用它们，这样您就可以使用margin: 0 auto;将其居中。

对HTML进行了一些操作，我将其清理为：

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#pocket').hide().delay(1000).fadeIn(8000).delay(2000);
            $('#pop').hide().delay(1000).fadeIn(3000).delay(2000);
        });
    </script>
</head>
<body>
    <div id="pics" align="center">
        <div id="pocket" style="z-index:5000"><a><img src="http://www.cjboco.com/assets/page-extras/cj-flashy-slideshow/image_a.jpg"/></a></div>
        <div id="pop" style="z-index:100"><a><img src="http://www.cjboco.com/assets/page-extras/cj-flashy-slideshow/image_b.jpg"/></a></div>
    </div>
</body>

</html>

CSS

#pics {
    position: relative;
    width: 200px;
    margin: 10px auto;
}

#pocket, #pop {
    position:absolute;
    left: 0;
    top: 0;
    display: none;
    float:center;
}

Answer 2

编辑：

现在查看此示例：

SEE DEMO

如果是，那么下面给出一些改变：

<强> CSS：

#pocket, #pop {    
    display: none;
    float:center;
}

#pocket {
    position:relative;
    z-index: 2;
    top: 0px;
}

#pop {
    position:absolute;
    z-index: 1;
    top: 180px;
}

从以下HTML代码中删除z-index值：

 <div id="pocket" style="z-index:5000">
 and
 <div id="pop" style="z-index:100">

使用jQuery：

$('#pocket').hide().delay(1000).fadeIn(1000).delay(500);
$('#pop').hide().delay(1000).fadeIn(4000).delay(500).fadeOut(500).animate({
    'z-index' : 3
}, 500).fadeIn(500);

如何将图像放在另一个图像后面，然后向上滑动？

HTML：

CSS：

2 个答案: