1

私はjQueryアニメーションを使用して画像にフェードします.これが機能するために、2つの画像はDIV内のDIVにあり、一方が他方にフェードインしているように見え、一方が他方の上に配置されます. それは機能します。私がやりたいのは、それをページの中央に移動することだけで、機能させることができないようです。HTMLとCSSはこちら。余白、上と左の配置などを変更しようとしましたが、何もうまくいきませんでした。フィードバックをお寄せいただきありがとうございます。

編集:私が欲しいのは、他のDIVの上にあるDIVです。どちらも同じ画像で満たされていますが、編集ソフトウェアで作成したグローが周りに付いています。ページが読み込まれると、jQuery は最初の div である .fade のフェードアウトをトリガーし、他の div である .inside のフェードインを許可して、1 つの画像が別の画像にゆっくりと変化しているかのように見えるアニメーションを作成します。これはすでに自動的に行われ、完全に機能します。左側に自動的に配置されるのではなく、画像がブラウザウィンドウの中央に直接配置されるようにしたいだけです。

CSS

    .container
    {
        position:relative;
    }
    .fade
    {
        position: absolute;
        z-index:1;
        top:0;
        left:0;
    }
    .inside
    {
        position: absolute;
        display: none;
        z-index:2;
        top:0;
        left:0;
    }

HTML

    <div class="container">
            <div class="fade">
                <img src="namelarge.png" />
                    <div class="inside">
                        <img src="nameglow.png" />
                    </div>
            </div>
        </div>

編集:ここに私のjQueryがあります

$(window).load(function () {
setTimeout(function () {
    $('div.fade > div') . fadeIn(3000) // 3 second fade in
}, 2000) // after 2 seconds. })
4

2 に答える 2