中央のインラインテキストはフェードイン時に再配置されます

Question

私はここでちょっとピクルに入っています。私は、コールバックを使用して異なる速度でフェードインする2つの異なる文を中心にしたインラインテキストを作成しようとしましたfadein関数はJQueryで機能します。問題は、アニメーションが私が望んでいたものではないということです。最初の単語が最初に表示され、次に2番目の単語が現れると、最初の単語が左にプッシュされます。

これらのテキストを固定した中央に置く方法はありますか？私はそれぞれのテキストにの相対,絶対を適用しようとしましたが、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>