jqueryで見せかけ遷移をする際に、ページ途中に移動してしまう

ボタンの「#id」をクリックすると、「.result_A」が非表示になって、「.result_B」が表示するよう実装しました。

しかし、「.result_B」が表示された際に、「#result_fv」が一番上に表示されず、「.hoge」の要素が一番上に表示されてしまいます。

何が原因かわからずお分かりの方は教えていただけますでしょうか？？

html
1<div class="result_A">
2コンテンツA
3</div>
4
5<img id="button" src="img/btn.png" alt="結果" />
6
7<div class="result_B" style="display:block";>
8<img id="result_fv" src="img/result_fv.png" alt="FV" />
9
10<p class="hoge">
11ここのコンテンツがページ上に表示される。
12本当は画像を一番上に表示したい。
13</p>
14</div>

js
1$(function() {
2  $('#button').click(function() {
3      $('.result_A').animate({opacity: 1}, 500,function(){
4      $('.result_A').css('display','none');
5      $('.result_B').css('display','');
6    });
7  });
8});

行動規範の内容に同意します

回答1件

とくに問題無いと思いますが.result_Bは最初非表示ですよね？

javascript
1<script>
2$(function() {
3  $('#button').click(function() {
4      $('.result_A').animate({opacity: 1}, 500,function(){
5      $('.result_A').css('display','none');
6      $('.result_B').css('display','');
7    });
8  });
9});
10</script>
11<div class="result_A">
12コンテンツA
13</div>
14<img id="button" src="img/btn.png" alt="結果" />
15<div class="result_B" style="display:none;">
16<img id="result_fv" src="img/result_fv.png" alt="FV" />
17<p class="hoge">
18ここのコンテンツがページ上に表示される。
19本当は画像を一番上に表示したい。
20</p>
21</div>