为什么第二次点击功能不起作用？

Question

当我点击其中一张电影图片时，第一次点击功能起作用，hide()其他电影＆amp;只显示点击的电影。

第二次点击功能不起作用。它显示一个小十字，当点击它时，它假设再次显示所有4个电影＆amp; hide()当前正在播放的电影的说明文字。

为什么这不起作用？

＆＃13;

＆＃13;

$(document).ready(function() {
  //$('.cross').hide();
  $('.movie').on('click', function() {
    $('.movie').hide();
    $(this).show().addClass('showmovie');
  }); // close .move click


  $('.movie').on('click', '.cross', function() {
    $(this).closest('.movie').hide().removeClass('showmovie');
    $('.movie').show();
  }); // close above function

}); //close document ready

＆＃13;

/*--------------------
Body
--------------------*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse farthest-corner at center top, #ffee75, #ff8930);
  color: #8b9095;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
}

@mixin center {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*--------------------
App
--------------------*/

.app {
  @include center;
  background: #fff;
  border-radius: 15px;
  -000000pp box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
  width: 700px;
  margin: 0 auto;
}

h2 {
  color: #525661;
  font-size: 17px;
  box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.1);
  padding: 20px 28px 0;
  margin: -6px 0 0 0;
}


/*--------------------
Header
--------------------*/

header {
  padding: 30px;
  position: relative;
  height: 70px;
  h1 {
    @include center;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    color: #1c222b;
    strong {
      background: #F16018;
      color: #fff;
      display: inline-block;
      border-radius: 30px;
      padding: 6px;
      font-size: 83%;
      line-height: 1;
      position: relative;
      top: -1px;
      left: 2px;
    }
  }
  nav {
    cursor: pointer;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 28px;
    left: 28px;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: #363a47;
      border-radius: 2px;
      box-shadow: 0 5px 0 #363a47, 0 10px 0 #363a47;
    }
  }
  .search {
    position: absolute;
    top: 26px;
    right: 18px;
    cursor: pointer;
    svg {
      width: 20px;
      height: 20px;
    }
  }
}


/*--------------------
Movies
--------------------*/

.movies {
  display: flex;
  padding: 8px 18px;
}

.movie {
  padding: 10px;
  cursor: pointer;
  width: 25%;
}

.poster {
  width: 100%;
  margin-bottom: 6px;
  border-radius: 4px;
  &.active {
    opacity: 0;
  }
}

.title {
  //text-transform: uppercase;
  color: #525661;
  margin-bottom: 4px;
  font-size: 16px;
}

.info {
  font-size: 11px;
  opacity: .8;
}

.desc {
  display: none;
}


}

}

/*--------------------
Detail
--------------------*/
.detail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  padding: 37px 30px 30px 255px;
  display: none;
  &::before {
    content: '';
    background: #fff;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    opacity: 0;
    transition: all .4s cubic-bezier(.67, .13, .1, .81);
  }
  .close {
    position: absolute;
    top: 21px;
    right: 22px;
    width: 12px;
    height: 12px;
    cursor: pointer;
    border: 6px solid #FFF;
    box-sizing: content-box;
    z-index: 10;
  }
  .poster {
    position: absolute;
    z-index: 2;
    top: -10%;
    left: -6%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    //opacity: 0;
    transition: all .5s cubic-bezier(.67, .13, .1, .81);
  }
  .title,
  .info,
  .desc,
  .play,
  .close {
    transform: translateX(-50px);
    opacity: 0;
    transition: all .4s cubic-bezier(.67, .13, .1, .81);
  }
  .close {
    transform: translateX(10px);
    ;
  }
  .title {
    font-size: 35px;
    font-weight: 300;
    color: #525661;
    margin-bottom: 5px;
  }
  .info {
    font-size: 11px;
    opacity: 0;
    margin-left: 2px;
  }
  .desc {
    margin-top: 30px;
    font-size: 14px;
    line-height: 1.6;
  }
  .play {
    background: linear-gradient(90deg, #E4761F, #FF8B32);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 17px;
    margin: 30px 0 0 -2px;
    text-transform: uppercase;
    z-index: 10;
    outline: none !important;
    cursor: pointer;
    opacity: 0;
    svg {
      vertical-align: middle;
      position: relative;
      top: -2px;
      margin-right: 3px;
    }
  }
}
.detail.ready {
  &::before {
    opacity: 1;
  }
  .info {
    opacity: .8;
  }
  .poster {
    opacity: 1;
    transition-duration: .5s;
  }
  .title,
  .info,
  .desc,
  .play,
  .close {
    transform: translateX(0);
    opacity: 1;
    transition-delay: 0s;
    transition-duration: .5s;
  }
  .title {
    transition-delay: .2s;
  }
  .info {
    transition-delay: .3s;
  }
  .desc {
    transition-delay: .4s;
  }
  .play {
    transition-delay: .5s;
  }
}
//* {display: none;} *//
.cross {
  display: none;
}
.showmovie {
  width: 100%;
  min-width: 100%;
}
.showmovie>.title {
  font-size: 2em;
}
.showmovie>img {
  width: 250px;
}
.showmovie>.desc {
  font-size: 1.2em;
  display: block;
}
.showmovie>.cross {
  display: block;
}
.showmovie>.movie {
  width: 100%;
  min-width: 100%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="css/style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/script.js"></script>
</head>

<body>

  <div class="app">
    <header>

      <nav></nav>
      <div class="search"><svg><use xlink:href="#ico-search"></use></svg></div>
    </header>

    <h2 class="titlec">Most Popular Movies</h2>
    <section class="movies">
      <div class="movie">
        <img src="https://github.com/supahfunk/supah-codepen/blob/master/movie-room.jpg?raw=true" alt="" class="poster" />
        <div class="title">Room</div>
        <div class="info">
          <span class="length">117 min</span>
          <span class="year">2015</span>
        </div>
        <div class="desc">

          <p>

            Jack is a young boy of 5 years old who has lived all his life in one room. He believes everything within it are the only real things in the world. But what will happen when his Ma suddenly tells him that there are other things outside of Room? </p>
        </div>
        <button class="play">  Play </button>
        <a href="#" class="cross room" aria-label="Close Account Info Modal Box">&times;</a>
      </div>
      <!-- close .movie -->
      <div class="movie">
        <img src="https://github.com/supahfunk/supah-codepen/blob/master/movie-whiplash.jpg?raw=true" alt="" class="poster" />
        <div class="title">Whiplash</div>
        <div class="info">
          <span class="length">167 min</span>
          <span class="year">2015</span>
        </div>
        <div class="desc">
          Under the direction of a ruthless instructor, a talented young drummer begins to pursue perfection at any cost, even his humanity.
        </div>
        <button class="play">  Play  </button>
        <a href="#" class="cross" aria-label="Close Account Info Modal Box">&times;</a>
      </div>
      <!-- close .movie -->
      <div class="movie">
        <img src="https://github.com/supahfunk/supah-codepen/blob/master/movie-madmax.jpg?raw=true" alt="" class="poster" />
        <div class="title">Mad Max</div>
        <div class="info">
          <span class="length">120 min</span>
          <span class="year">2015</span>
        </div>
        <div class="desc">
          An apocalyptic story set in the furthest reaches of our planet, in a stark desert landscape where humanity is broken, and most everyone is crazed fighting for the necessities of life. Within this world exist two rebels on the run who just might be able
          to restore order. There's Max, a man of action and a man of few words, who seeks peace of mind following the loss of his wife and child in the aftermath of the chaos.
        </div>
        <button class="play"> Play </button>
        <a href="#" class="cross" aria-label="Close Account Info Modal Box">&times;</a>
      </div>
      <!-- close .movie-->
      <div class="movie">
        <img src="https://github.com/supahfunk/supah-codepen/blob/master/movie-therevenant.jpg?raw=true" alt="" class="poster" />
        <div class="title">The Revenant</div>
        <div class="info">
          <span class="length">156 min</span>
          <span class="year">2015</span>
        </div>
        <div class="desc">
          In the 1820s, a frontiersman, Hugh Glass, sets out on a path of vengeance against those who left him for dead after a bear mauling.
        </div>
        <button class="play">  Play </button>
        <a href="#" class="cross" aria-label="Close Account Info Modal Box">&times;</a>
      </div>
      <!-- close .movie-->
    </section>

  </div>
  <!--close .app -->

</body>

</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题在于您将click事件绑定两次（这只会导致两个处理程序被触发）。

相反，您需要绑定一次，但要检查您的状态。我这样做是通过一个布尔变量来表示我是否处于“列表状态”（isMovieSelected = false）或“电影状态”（isMovieSelected = true）

$(document).ready(function() {
  var isMovieSelected = false;
  //$('.cross').hide();
  $('.movie').on('click', function() {
    if (isMovieSelected) {
      $(this).closest('.movie').hide().removeClass('showmovie');
      $('.movie').show();  
    } else {
      $('.movie').hide();
      $(this).show().addClass('showmovie');
    }
    
    isMovieSelected = !isMovieSelected;
  }); // close .move click
}); //close document ready

/*--------------------
Body
--------------------*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse farthest-corner at center top, #ffee75, #ff8930);
  color: #8b9095;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
}

@mixin center {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*--------------------
App
--------------------*/

.app {
  @include center;
  background: #fff;
  border-radius: 15px;
  -000000pp box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
  width: 700px;
  margin: 0 auto;
}

h2 {
  color: #525661;
  font-size: 17px;
  box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.1);
  padding: 20px 28px 0;
  margin: -6px 0 0 0;
}


/*--------------------
Header
--------------------*/

header {
  padding: 30px;
  position: relative;
  height: 70px;
  h1 {
    @include center;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    color: #1c222b;
    strong {
      background: #F16018;
      color: #fff;
      display: inline-block;
      border-radius: 30px;
      padding: 6px;
      font-size: 83%;
      line-height: 1;
      position: relative;
      top: -1px;
      left: 2px;
    }
  }
  nav {
    cursor: pointer;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 28px;
    left: 28px;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: #363a47;
      border-radius: 2px;
      box-shadow: 0 5px 0 #363a47, 0 10px 0 #363a47;
    }
  }
  .search {
    position: absolute;
    top: 26px;
    right: 18px;
    cursor: pointer;
    svg {
      width: 20px;
      height: 20px;
    }
  }
}


/*--------------------
Movies
--------------------*/

.movies {
  display: flex;
  padding: 8px 18px;
}

.movie {
  padding: 10px;
  cursor: pointer;
  width: 25%;
}

.poster {
  width: 100%;
  margin-bottom: 6px;
  border-radius: 4px;
  &.active {
    opacity: 0;
  }
}

.title {
  //text-transform: uppercase;
  color: #525661;
  margin-bottom: 4px;
  font-size: 16px;
}

.info {
  font-size: 11px;
  opacity: .8;
}

.desc {
  display: none;
}


}

}

/*--------------------
Detail
--------------------*/
.detail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  padding: 37px 30px 30px 255px;
  display: none;
  &::before {
    content: '';
    background: #fff;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    opacity: 0;
    transition: all .4s cubic-bezier(.67, .13, .1, .81);
  }
  .close {
    position: absolute;
    top: 21px;
    right: 22px;
    width: 12px;
    height: 12px;
    cursor: pointer;
    border: 6px solid #FFF;
    box-sizing: content-box;
    z-index: 10;
  }
  .poster {
    position: absolute;
    z-index: 2;
    top: -10%;
    left: -6%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    //opacity: 0;
    transition: all .5s cubic-bezier(.67, .13, .1, .81);
  }
  .title,
  .info,
  .desc,
  .play,
  .close {
    transform: translateX(-50px);
    opacity: 0;
    transition: all .4s cubic-bezier(.67, .13, .1, .81);
  }
  .close {
    transform: translateX(10px);
    ;
  }
  .title {
    font-size: 35px;
    font-weight: 300;
    color: #525661;
    margin-bottom: 5px;
  }
  .info {
    font-size: 11px;
    opacity: 0;
    margin-left: 2px;
  }
  .desc {
    margin-top: 30px;
    font-size: 14px;
    line-height: 1.6;
  }
  .play {
    background: linear-gradient(90deg, #E4761F, #FF8B32);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 17px;
    margin: 30px 0 0 -2px;
    text-transform: uppercase;
    z-index: 10;
    outline: none !important;
    cursor: pointer;
    opacity: 0;
    svg {
      vertical-align: middle;
      position: relative;
      top: -2px;
      margin-right: 3px;
    }
  }
}
.detail.ready {
  &::before {
    opacity: 1;
  }
  .info {
    opacity: .8;
  }
  .poster {
    opacity: 1;
    transition-duration: .5s;
  }
  .title,
  .info,
  .desc,
  .play,
  .close {
    transform: translateX(0);
    opacity: 1;
    transition-delay: 0s;
    transition-duration: .5s;
  }
  .title {
    transition-delay: .2s;
  }
  .info {
    transition-delay: .3s;
  }
  .desc {
    transition-delay: .4s;
  }
  .play {
    transition-delay: .5s;
  }
}
//* {display: none;} *//
.cross {
  display: none;
}
.showmovie {
  width: 100%;
  min-width: 100%;
}
.showmovie>.title {
  font-size: 2em;
}
.showmovie>img {
  width: 250px;
}
.showmovie>.desc {
  font-size: 1.2em;
  display: block;
}
.showmovie>.cross {
  display: block;
}
.showmovie>.movie {
  width: 100%;
  min-width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="css/style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/script.js"></script>
</head>

<body>

  <div class="app">
    <header>

      <nav></nav>
      <div class="search"><svg><use xlink:href="#ico-search"></use></svg></div>
    </header>

    <h2 class="titlec">Most Popular Movies</h2>
    <section class="movies">
      <div class="movie">
        <img src="https://github.com/supahfunk/supah-codepen/blob/master/movie-room.jpg?raw=true" alt="" class="poster" />
        <div class="title">Room</div>
        <div class="info">
          <span class="length">117 min</span>
          <span class="year">2015</span>
        </div>
        <div class="desc">

          <p>

            Jack is a young boy of 5 years old who has lived all his life in one room. He believes everything within it are the only real things in the world. But what will happen when his Ma suddenly tells him that there are other things outside of Room? </p>
        </div>
        <button class="play">  Play </button>
        <a href="#" class="cross room" aria-label="Close Account Info Modal Box">&times;</a>
      </div>
      <!-- close .movie -->
      <div class="movie">
        <img src="https://github.com/supahfunk/supah-codepen/blob/master/movie-whiplash.jpg?raw=true" alt="" class="poster" />
        <div class="title">Whiplash</div>
        <div class="info">
          <span class="length">167 min</span>
          <span class="year">2015</span>
        </div>
        <div class="desc">
          Under the direction of a ruthless instructor, a talented young drummer begins to pursue perfection at any cost, even his humanity.
        </div>
        <button class="play">  Play  </button>
        <a href="#" class="cross" aria-label="Close Account Info Modal Box">&times;</a>
      </div>
      <!-- close .movie -->
      <div class="movie">
        <img src="https://github.com/supahfunk/supah-codepen/blob/master/movie-madmax.jpg?raw=true" alt="" class="poster" />
        <div class="title">Mad Max</div>
        <div class="info">
          <span class="length">120 min</span>
          <span class="year">2015</span>
        </div>
        <div class="desc">
          An apocalyptic story set in the furthest reaches of our planet, in a stark desert landscape where humanity is broken, and most everyone is crazed fighting for the necessities of life. Within this world exist two rebels on the run who just might be able
          to restore order. There's Max, a man of action and a man of few words, who seeks peace of mind following the loss of his wife and child in the aftermath of the chaos.
        </div>
        <button class="play"> Play </button>
        <a href="#" class="cross" aria-label="Close Account Info Modal Box">&times;</a>
      </div>
      <!-- close .movie-->
      <div class="movie">
        <img src="https://github.com/supahfunk/supah-codepen/blob/master/movie-therevenant.jpg?raw=true" alt="" class="poster" />
        <div class="title">The Revenant</div>
        <div class="info">
          <span class="length">156 min</span>
          <span class="year">2015</span>
        </div>
        <div class="desc">
          In the 1820s, a frontiersman, Hugh Glass, sets out on a path of vengeance against those who left him for dead after a bear mauling.
        </div>
        <button class="play">  Play </button>
        <a href="#" class="cross" aria-label="Close Account Info Modal Box">&times;</a>
      </div>
      <!-- close .movie-->
    </section>

  </div>
  <!--close .app -->

</body>

</html>

Answer 2

关闭十字按钮上的click事件会使DOM冒泡，然后触发绑定在父e.stopPropagation(); div上的click事件。您可以通过在代码中添加$(document).ready(function() { //$('.cross').hide(); $('.movie').on('click', function() { $('.movie').hide(); $(this).show().addClass('showmovie'); }); // close .move click $('.movie').on('click', '.cross', function(e) { e.stopPropagation(); $(this).closest('.movie').hide().removeClass('showmovie'); $('.movie').show(); }); // close above function }); //close document ready来轻松停止此操作。没有额外的变量或必要条件。

＆＃13;

＆＃13;

/*--------------------
Body
--------------------*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse farthest-corner at center top, #ffee75, #ff8930);
  color: #8b9095;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
}

@mixin center {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*--------------------
App
--------------------*/

.app {
  @include center;
  background: #fff;
  border-radius: 15px;
  -000000pp box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
  width: 700px;
  margin: 0 auto;
}

h2 {
  color: #525661;
  font-size: 17px;
  box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.1);
  padding: 20px 28px 0;
  margin: -6px 0 0 0;
}


/*--------------------
Header
--------------------*/

header {
  padding: 30px;
  position: relative;
  height: 70px;
  h1 {
    @include center;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    color: #1c222b;
    strong {
      background: #F16018;
      color: #fff;
      display: inline-block;
      border-radius: 30px;
      padding: 6px;
      font-size: 83%;
      line-height: 1;
      position: relative;
      top: -1px;
      left: 2px;
    }
  }
  nav {
    cursor: pointer;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 28px;
    left: 28px;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: #363a47;
      border-radius: 2px;
      box-shadow: 0 5px 0 #363a47, 0 10px 0 #363a47;
    }
  }
  .search {
    position: absolute;
    top: 26px;
    right: 18px;
    cursor: pointer;
    svg {
      width: 20px;
      height: 20px;
    }
  }
}


/*--------------------
Movies
--------------------*/

.movies {
  display: flex;
  padding: 8px 18px;
}

.movie {
  padding: 10px;
  cursor: pointer;
  width: 25%;
}

.poster {
  width: 100%;
  margin-bottom: 6px;
  border-radius: 4px;
  &.active {
    opacity: 0;
  }
}

.title {
  //text-transform: uppercase;
  color: #525661;
  margin-bottom: 4px;
  font-size: 16px;
}

.info {
  font-size: 11px;
  opacity: .8;
}

.desc {
  display: none;
}


}

}

/*--------------------
Detail
--------------------*/
.detail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  padding: 37px 30px 30px 255px;
  display: none;
  &::before {
    content: '';
    background: #fff;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    opacity: 0;
    transition: all .4s cubic-bezier(.67, .13, .1, .81);
  }
  .close {
    position: absolute;
    top: 21px;
    right: 22px;
    width: 12px;
    height: 12px;
    cursor: pointer;
    border: 6px solid #FFF;
    box-sizing: content-box;
    z-index: 10;
  }
  .poster {
    position: absolute;
    z-index: 2;
    top: -10%;
    left: -6%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    //opacity: 0;
    transition: all .5s cubic-bezier(.67, .13, .1, .81);
  }
  .title,
  .info,
  .desc,
  .play,
  .close {
    transform: translateX(-50px);
    opacity: 0;
    transition: all .4s cubic-bezier(.67, .13, .1, .81);
  }
  .close {
    transform: translateX(10px);
    ;
  }
  .title {
    font-size: 35px;
    font-weight: 300;
    color: #525661;
    margin-bottom: 5px;
  }
  .info {
    font-size: 11px;
    opacity: 0;
    margin-left: 2px;
  }
  .desc {
    margin-top: 30px;
    font-size: 14px;
    line-height: 1.6;
  }
  .play {
    background: linear-gradient(90deg, #E4761F, #FF8B32);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 17px;
    margin: 30px 0 0 -2px;
    text-transform: uppercase;
    z-index: 10;
    outline: none !important;
    cursor: pointer;
    opacity: 0;
    svg {
      vertical-align: middle;
      position: relative;
      top: -2px;
      margin-right: 3px;
    }
  }
}
.detail.ready {
  &::before {
    opacity: 1;
  }
  .info {
    opacity: .8;
  }
  .poster {
    opacity: 1;
    transition-duration: .5s;
  }
  .title,
  .info,
  .desc,
  .play,
  .close {
    transform: translateX(0);
    opacity: 1;
    transition-delay: 0s;
    transition-duration: .5s;
  }
  .title {
    transition-delay: .2s;
  }
  .info {
    transition-delay: .3s;
  }
  .desc {
    transition-delay: .4s;
  }
  .play {
    transition-delay: .5s;
  }
}
//* {display: none;} *//
.cross {
  display: none;
}
.showmovie {
  width: 100%;
  min-width: 100%;
}
.showmovie>.title {
  font-size: 2em;
}
.showmovie>img {
  width: 250px;
}
.showmovie>.desc {
  font-size: 1.2em;
  display: block;
}
.showmovie>.cross {
  display: block;
}
.showmovie>.movie {
  width: 100%;
  min-width: 100%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="css/style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/script.js"></script>
</head>

<body>

  <div class="app">
    <header>

      <nav></nav>
      <div class="search"><svg><use xlink:href="#ico-search"></use></svg></div>
    </header>

    <h2 class="titlec">Most Popular Movies</h2>
    <section class="movies">
      <div class="movie">
        <img src="https://github.com/supahfunk/supah-codepen/blob/master/movie-room.jpg?raw=true" alt="" class="poster" />
        <div class="title">Room</div>
        <div class="info">
          <span class="length">117 min</span>
          <span class="year">2015</span>
        </div>
        <div class="desc">

          <p>

            Jack is a young boy of 5 years old who has lived all his life in one room. He believes everything within it are the only real things in the world. But what will happen when his Ma suddenly tells him that there are other things outside of Room? </p>
        </div>
        <button class="play">  Play </button>
        <a href="#" class="cross room" aria-label="Close Account Info Modal Box">&times;</a>
      </div>
      <!-- close .movie -->
      <div class="movie">
        <img src="https://github.com/supahfunk/supah-codepen/blob/master/movie-whiplash.jpg?raw=true" alt="" class="poster" />
        <div class="title">Whiplash</div>
        <div class="info">
          <span class="length">167 min</span>
          <span class="year">2015</span>
        </div>
        <div class="desc">
          Under the direction of a ruthless instructor, a talented young drummer begins to pursue perfection at any cost, even his humanity.
        </div>
        <button class="play">  Play  </button>
        <a href="#" class="cross" aria-label="Close Account Info Modal Box">&times;</a>
      </div>
      <!-- close .movie -->
      <div class="movie">
        <img src="https://github.com/supahfunk/supah-codepen/blob/master/movie-madmax.jpg?raw=true" alt="" class="poster" />
        <div class="title">Mad Max</div>
        <div class="info">
          <span class="length">120 min</span>
          <span class="year">2015</span>
        </div>
        <div class="desc">
          An apocalyptic story set in the furthest reaches of our planet, in a stark desert landscape where humanity is broken, and most everyone is crazed fighting for the necessities of life. Within this world exist two rebels on the run who just might be able
          to restore order. There's Max, a man of action and a man of few words, who seeks peace of mind following the loss of his wife and child in the aftermath of the chaos.
        </div>
        <button class="play"> Play </button>
        <a href="#" class="cross" aria-label="Close Account Info Modal Box">&times;</a>
      </div>
      <!-- close .movie-->
      <div class="movie">
        <img src="https://github.com/supahfunk/supah-codepen/blob/master/movie-therevenant.jpg?raw=true" alt="" class="poster" />
        <div class="title">The Revenant</div>
        <div class="info">
          <span class="length">156 min</span>
          <span class="year">2015</span>
        </div>
        <div class="desc">
          In the 1820s, a frontiersman, Hugh Glass, sets out on a path of vengeance against those who left him for dead after a bear mauling.
        </div>
        <button class="play">  Play </button>
        <a href="#" class="cross" aria-label="Close Account Info Modal Box">&times;</a>
      </div>
      <!-- close .movie-->
    </section>

  </div>
  <!--close .app -->

</body>

</html>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;