2
私は持っている<div>要素のためにjQueryを使ってフェードイントランジションをアニメーションしています。これはコードです：私のdivはshow（）で適切にフェードインしますが、アニメーションの完了時にジャンプします
$(document).ready(function() {
...
function calculate() {
...
if ($("#results").css('display') === 'none') {
console.log("fadein");
$("#results").show("normal", function() {
console.log("animation complete");
});
}
...
}
}
ここで私がフェードインしています<のdiv要素>されています。実際に
<div id="results">
<p>Input equation: <span id="eq" class="result"></span></p>
<p>Roots: <span id="root1" class="result"></span>, <span id="root2" class="result"></span></p>
</div>
フェージングが完璧に動作します。しかし、アニメーションが完了するとすぐに、要素は突然ページの上に約20ピクセル飛びます。 （私は、アニメーションが要素を意図した場所の約20ピクセル下に置き、完成後20ピクセル上に要素をジャンプさせるとも言えるかもしれません）。これをどのように修正できますか？
（私はこのジャンプバグはChromeとFirefoxの両方で起こることを言及する必要があります）
編集：
私は本当にスタイルシートの多くを持っていないが、ここにある：
<style type="text/css">
.result {
color: blue;
}
#results {
display: none;
}
input[type="text"] {
width:50px;
}
</style>
これはまったく使用していますが、十分に短いので、私の文書の本文全体があります。
<body>
<p><input type="text" maxlength="10" id="input_a" class="variable"/>x^2 +
<input type="text" maxlength="10" id="input_b" class="variable"/>x +
<input type="text" maxlength="10" id="input_c" class="variable"/> = 0</p>
<p><button type="submit" disabled="disabled">Calculate</button>
<button type="reset">Clear</button></p>
<div id="results">
<p>Input equation: <span id="eq" class="result"></span></p>
<p>Roots: <span id="root1" class="result"></span>, <span id="root2" class="result"></span></p>
</div>
</body>
編集2：それはあまりにも長くはありませんので、ここでは全体のコードは、です：オリジナルのポスト次の議論パーhttp://pastebin.com/kfjpkSBr
あなたのスタイルシートは 'results' idの余白やパディングを定義していますか？これはしばしばアニメーションの問題の原因です。 – Xenethyl
スタイルシートを投稿できますか？私は上記のコードで問題を参照してください – jQuerybeast
私は多くのスタイルシートを持っていないが、私は上記で編集しました。 – kibibyte