0

現在、「画像 A」と「画像 B」の 2 つの画像があります。現時点で、私の意図は、イメージ A をフェード インし、その後ろにイメージ B をフェード インすることです (すべてページの中央に配置したまま)。しかし、代わりに画像Bが画像Aを押し上げているように見えます。私は z-index を使用していますが、うまく機能していないため、間違っている可能性があります。

画像 B にフェードインした後、正しくは画像 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;
}

z-index以下の HTML コードから値を削除します。

 <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 に答える