fadeIn()fadeOut() が思った通りに動きません。

前提・実現したいこと

.fadeIn()と.fadeOut()で「最初の場所から移動してきた」みたいな動きにしたいのですが、画像をクリックすると元の場所から消えて、何もないところからパッと出てきた動きになってしまうのですが、どうしてでしょうか？

コード

html
1  <div class="main">
2    <div class="haikei">
3      <div class="background-shelf">
4        <div class="shelf1"><img src="../images/shelf.png"></div>
5      </div>
6      <div class="main-tag">
7        <div class="bookA">
8          <img src="../images/books/AAA.jpg" class="alltag tag-A">
9          <div id="overlay-A">
10            <div id="overlayWindow-A">
11              <p>オーバーレイが表示されています</p>
12              <button id="buttonA">閉じる</button>
13            </div>
14          </div>
15        </div>
16        <div class="bookB">
17          <img src="../images/books/BBB.jpg" class="alltag tag-B">
18          <div id="overlay-B">
19            <div id="overlayWindow-B">
20              <p>オーバーレイが表示されています</p>
21              <button id="buttonB">閉じる</button>
22            </div>
23          </div>
24        </div>
25        <div class="bookC">
26          <img src="../images/books/CCC.jpg" class="alltag tag-C">
27          <div id="overlay-C">
28            <div id="overlayWindow-C">
29              <p>オーバーレイが表示されています</p>
30              <button id="buttonC">閉じる</button>
31            </div>
32          </div>
33        </div>
34      </div>
35     </div>
36    </div>

css
1.main {
2  position: relative;
3  height: 2800px;
4  top: 0;
5}
6.haikei{
7  width: 1000px;
8  position: absolute;
9  left: 0;
10  right: 0;
11  margin: auto;
12}
13.background-shelf img{
14  width: 1000px;
15  position: absolute;
16}
17.background-shelf{
18  position: absolute;
19  left: 0;
20  right: 0;
21  margin: auto;
22}
23.shelf1{
24  margin-top: 300px;
25}
26.main-tag{
27  position: absolute;
28  left: 0;
29  right: 0;
30  margin: auto;
31}
32.alltag{
33  position: absolute;
34  width: 150px;
35  border-radius: 2px;
36  transition: all 0.3s;
37  box-shadow: -2px 1px 5px 3px rgba(0, 0, 0, 0.3) ;
38  top:0;
39  left: 0;
40}
41.alltag:hover {
42  top: -15px;
43  left: 0px;
44  box-shadow: -2px 10px 50px 1px rgba(0, 0, 0, 0.3) ;
45  transition: all 0.5s;
46}
47.tag-A,.tag-B,.tag-C{
48  margin-top: 130px;
49}
50.tag-A{
51  margin-left: 140px;
52}
53.tag-B{
54  margin-left: 430px;
55}
56.tag-C{
57  margin-left: 730px;
58}
59#overlay-A,
60#overlay-B,
61#overlay-C {
62  width: 100%;
63  height: 100%;
64  position: fixed;
65  top: 0;
66  left: 0;
67  background: rgba(99, 99, 99, 0.7);
68  display: none;
69  z-index: 998;
70}
71#overlayWindow-A,
72#overlayWindow-B,
73#overlayWindow-C {
74  width: 500px;
75  margin: 100px auto;
76  text-align: center;
77  border: 1px solid rgba(99, 99, 99, 0.7);
78  display: none;
79}
80.maintag p{
81  padding: 10px 30px;
82}
83.main-tag button{
84  margin-top: auto;
85  margin-bottom: 10px;

JQUERY
1$(function() {
2  $('.tag-A').on('click', function() {
3    $("#overlay-A, #overlayWindow-A").fadeIn();
4    $(function() {
5      $('.tag-A')
6      .css('top','100px')
7      .css('left','20px')
8      .css('z-index','999')
9      .css('position','fixed')
10      });
11  });
12  $('#buttonA').on('click', function() {
13    $("#overlay-A, #overlayWindow-A").fadeOut();
14    $(function() {
15      $('.tag-A')
16      .css('top','')
17      .css('left','')
18      .css('z-index','')
19      .css('position','')
20    });
21  });
22});
23$(function() {
24  $('.tag-C').on('click', function() {
25    $("#overlay-C, #overlayWindow-C").fadeIn();
26    $(function() {
27      $('.tag-C')
28      .css('top','100px')
29      .css('left','20px')
30      .css('z-index','999')
31      .css('position','fixed')
32      });
33  });
34  $('#buttonC').on('click', function() {
35    $("#overlay-C, #overlayWindow-C").fadeOut();
36    $(function() {
37      $('.tag-C')
38      .css('top','')
39      .css('left','')
40      .css('z-index','')
41      .css('position','')
42    });
43  });
44});

jQuery
1（変更部分）
2$(function() {
3  $('.tag-A').on('click', function() {
4    $("#overlay-A, #overlayWindow-A").fadeIn();
5    $(function() {
6      $('.tag-A')
7      .appendTo('#overlayWindow-A')
8      .css('top','100px')
9      .css('left','20px')
10      .css('z-index','999')
11      });
12  });
13  $('#buttonA').on('click', function() {
14    $("#overlay-A, #overlayWindow-A").fadeOut();
15    $(function() {
16      $('.tag-A')
17      .css('top','')
18      .css('left','')
19      .css('z-index','')
20    });
21  });
22});

補足情報

できればですが、jqueryをもっと綺麗にまとめたいと思っております。

Lhankor_Mhy

2020/12/04 07:19

ご提示のコードを試してみました。「何もないところからパッと出てきた動き」とのことですが、ピンときませんでした。以下のページでも問題は再現されていますか？ https://jsfiddle.net/Lhankor_Mhy/d1ofpx4z/

umi3

2020/12/04 07:24

ありがとうございます。そうですね、上のページも同じ動きです・・・何と言いますか、クリックした時にカクッと動く感じを治したいと思ってまして、クリック前の場所からクリック後の場所までスムーズに移動させたいイメージです。

Lhankor_Mhy

2020/12/04 07:41

問題を把握しました。

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

回答1件

どうしてでしょうか？

position:absoluteからposition:fixedに変わることによって、包含ブロックも変わるからです。

position プロパティが absolute の場合、包含ブロックは position の値が static 以外 (fixed, absolute, relative, sticky) の直近の祖先要素におけるパディングボックスの辺によって構成されます。

position プロパティが fixed の場合、包含ブロックはビューポート (連続的なメディアの場合) またはページ領域 (ページメディアの場合) によって確立されます。
レイアウトと包含ブロック - CSS: カスケーディングスタイルシート | MDN

position が absolute 又は fixed に設定されている場合、 left プロパティは要素の左辺と包含ブロックの左辺との間の距離を指定します。

left - CSS: カスケーディングスタイルシート | MDN

投稿2020/12/04 07:52

Lhankor_Mhy

総合スコア36960

umi3

2020/12/04 08:08

ありがとうございます！思ってた通りに動きました！ですが今度はスクロールしても場所の固定ができなくなってしまったのですが、positionをtopとleftで指定しながらスクロールしても場所が動かないようにするにはどうすればいいのでしょうか。。。引き続き質問ばかりでごめんなさい・・・

Lhankor_Mhy

2020/12/04 08:19

position:fixed にするしかないと思います。ですので、計算して同じ位置に修正するしかないと思います。

umi3

2020/12/04 09:50

.appendTo('#overlayWindow-A') を使って横に並べることはできたのですが、今度は移動ができなくなってしまいました。。。

Lhankor_Mhy

2020/12/04 09:53

現状のコードが想像できないです。

umi3

2020/12/04 12:06

jQuery　の変更した部分を追加しました。

Lhankor_Mhy

2020/12/04 14:08

コードを拝見しましたが、この方法で「何もないところからパッと出てきた動き」の問題が解消するようには思えませんでした。（おそらく、appendToで動かしたときに瞬間移動してしまう）いろいろお試しになるのはいいことだと思いますが、繰り返しになりますが私の考えとしては、同じ位置になるように計算するのがいいのではないかな、と思っています。

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