0

我目前有两个图像“图像 A”和“图像 B”。截至目前，我的意图是淡入图像 A，然后淡入其后面的图像 B（同时保持在页面的中心）。然而，相反，图像 B 似乎正在推高图像 A。我正在使用 z-index，但我可能做错了，因为它不是很有效。

在 IMAGE B 中淡入后，正确地我也想将它滑到 IMAGE A 的正上方。谢谢你的帮助！

图片A

图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 {
}
4

2 回答 2

2

改变这个

$('#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;
}
于 2013-01-24T04:24:10.763 回答
1

编辑：

现在看这个例子：

看演示

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

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);
于 2013-01-24T04:39:55.630 回答