居中，內嵌文本在淡入淡出後重新定位

Question

因此，我在這裏嘗試了一些小菜。我嘗試使用回調函數fadein函數以不同的速度創建一個帶有兩個不同語句的居中，內嵌文本。問題是動畫不是我想要的：第一個單詞出現在中心，然後當第二個單詞出現時，它將第一個單詞推向左邊。

有沒有辦法讓這些文本處於固定的中心位置？我已經試過對每個單獨的文本應用相對,絕對並使用css將位置向左移動，但它會擾亂設計的響應性。

下面的代碼：

$(document).ready(function() { 
 
    $("#1").fadeIn(1000, function() { 
 
    $("#2").fadeIn(2000); 
 
    }); 
 
});

#main { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <p id="1" style="display:none;">Hello.</p> 
 
    <p id="2" style="display:none;">World.</p> 
 
</div>

JSFiddle

您的幫助表示讚賞！

Answer 1

您可以改爲使用opacity或visibility，因爲這些會將元素的佈局保留在頁面上，並且只是直觀地隱藏/顯示它們。如果你想淡出opacity，用$.fadeTo()代替$.fadeIn() - https://api.jquery.com/fadeTo/

$(document).ready(function() { 
 
    $("#1").fadeTo('fast',1,function() { 
 
    $("#2").fadeTo('slow',1); 
 
    }); 
 
});

#main { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    display: inline; 
 
    opacity: 0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <p id="1">Hello.</p> 
 
    <p id="2">World.</p> 
 
</div>

您還可以使用CSS做到這一點。在這裏，我添加了一個啓用opacity: 1的類，並且您可以控制CSS轉換中的時間。

$(document).ready(function() { 
 
    $("#1").on('transitionend',function() { 
 
    $("#2").addClass('ready'); 
 
    }).addClass('ready'); 
 
});

#main { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    display: inline; 
 
    opacity: 0; 
 
    transition: opacity 1s; 
 
} 
 

 
.ready { 
 
    opacity: 1; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <p id="1">Hello.</p> 
 
    <p id="2">World.</p> 
 
</div>