1

このスクリプトを使用して、画像をフェードアウトし、新しい画像をフェードインしています。

$(document).ready(function() { 
    $('#picOne').fadeIn(500).delay(2000).fadeOut(1500);
    $('#picTwo').delay(3500).fadeIn(1000);
});

ページの上部中央に画像を表示したいのですが、次の CSS を使用しない限り、画像を同じ場所に表示することはできません。

#picOne, #picTwo {
    position: absolute;
    display: none;
}

#picOne、picTwo に position:relative を使用すると、画像を中央に配置できますが、picTwo がフェードインするときに picOne の下に 1 秒間表示され、残りのコンテンツが押し下げられてばかげて見えます。position:absolute を使用するとこの問題は解決しますが、中央に配置することはできません。

2 つの画像を div でラップすると役立つと思いましたが、違いはないようです。

<div id="pics">
<%= image_tag 'egg.png', :id => 'picOne' %> <%= image_tag 'egg2.png', :id => 'picTwo'  %>​
</div>

#pics {
        position:relative;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

何かご意見は？ご協力いただきありがとうございます！

4

1 に答える 1

1

あなたが試すことができます：

$(document).ready(function() { 
    $('#picOne').fadeIn(500).delay(2000).fadeOut(1500, function() {
        $('#picTwo').fadeIn(1000);
    });
});

後はフェードアウトfadeIn()します。したがって、それらは同じ空間に残ります。しかし、コードでは両方の画像が同時に表示されるように見えるため、スペースとの衝突があります。#picTwo#picOne

画像を中央に揃えるには、CSS を使用できますtext-align:center。こちらをご覧ください。

于 2012-08-12T19:12:17.017 に答える