jQueryで要素を消した後、その空間を詰めないようにするにはどうすればいいですか？

何も内容のない要素を作って、clickをした後にその要素が、消した後にできた空間に出てくるようにすればいいのですか？
よろしくお願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="stylesheet.css">
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
8  </head>
9  <body>
10    <div class="slide-wrapper">
11      <h2 class="slide-title">にんじゃわんこの一年</h2>
12        <div class="hide-btn-wrapper">
13          <div class="hide-btn" id="hide-btn">2枚目（梅雨のわんこ）を隠す</div>
14        </div>
15        <ul class="slides">
16          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li>
17          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"></li>
18          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"></li>
19          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"></li>
20        </ul>
21      </div>
22    <script type="text/javascript" src="script.js"></script>
23  </body>
24</html>

css
1body {
2  font-family: "Hiragino Maru Gothic ProN", sans-serif;
3}
4
5ul {
6  list-style: none;
7}
8
9.slide-wrapper {
10  text-align: center;
11  width: 1000px;
12  margin: 0 auto;
13  color: #5e6f84;
14  padding: 60px 0;
15}
16
17.slide-title {
18  font-size: 40px;
19  margin-bottom: 30px;
20}
21
22.hide-btn-wrapper {
23  font-size: 16px;
24  margin: 20px 0 30px 0;
25}
26
27.hide-btn {
28  display: inline-block;
29  color: #4e90af;
30  background-color: #e0f5ff;
31  padding: 6px 12px;
32  border-radius: 3px;
33  cursor: pointer;
34}
35
36.hide-btn:hover {
37  color: #fff;
38  background-color: #5cabd0;
39}
40
41.slides {
42  padding: 0;
43}
44
45.slide {
46  display: inline-block;
47}
48
49.slide img {
50  width: 200px;
51  height: auto;
52  border-radius: 5px;
53}

jQuery
1$(function() {
2  // 「#hide-btn」要素のclickイベントをつくってください
3  $('#hide-btn').click(function(){
4    $('.slide').eq(1).fadeOut();
5  });
6  
7});

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

回答2件

fadeOut メソッドの代わりに、 fadeTo と css メソッドを使い、 opacity プロパティで要素を透明にした後に visibility プロパティを hidden に設定すれば質問者さんの実現したいことが行えます (動作確認用リンク)。

jQuery
1$(function() {
2  $('#hide-btn').click(function() {
3    $('.slide').eq(1).fadeTo(400, 0, function() {
4      $(this).css("visibility", "hidden");
5    });
6  });
7});

投稿2020/02/02 06:41

s8_chu

総合スコア14731

ベストアンサー

fadeOutだと最後にdisplay: none;になってしまうので詰められます。

animate で透明にしたらどうでしょうか。

js
1$(function() {
2  // 「#hide-btn」要素のclickイベントをつくってください
3  $('#hide-btn').click(function(){
4    $('.slide').eq(1).animate({opacity: 0});
5  });
6});