我当前的代码有两个问题.

我正在尝试创建一个onclick事件,当单击#moreinfo时,该.maincontentcontainer会重新定位.

但是,当我第二次单击它时,它不会返回到它的原始位置,并且当我第三次,第四次单击等时,它不起作用.

任何帮助都会很棒

$(document).ready(function() {
   var moved = false;
    $("#moreinfo").click(function() {
	      if ($(".maincontentcontainer").attr("trigger") === "0") {
	        $(".maincontentcontainer img,.maincontentcontainer h3").animate({right: "50%"});
	        $(".maincontentcontainer").attr("trigger","1");
	      } else {
	        $(".maincontentcontainer img,.maincontentcontainer h3").animate({left: "50%"});
	        $(".maincontentcontainer").attr("trigger","0");    
	      }
    });
}); 

.container {
  height: 100vh;
}

.contentcontainer {
  position: relative;
  height: inherit;
  bottom: 0;
}

.maincontentcontainer {
  display: -webkit-Box;
  display: -ms-flexBox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-Box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-Box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
}

.maincontentcontainer img {
  position: absolute;
  top: 20%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: bottom;
  object-position: bottom;
  height: 60%;
  width: 60%;
  opacity: 1;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.maincontentcontainer h3 {
  position: absolute;
  top: 45%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: bottom;
  object-position: bottom;
  height: 60%;
  width: 60%;
  opacity: 1;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
  z-index: 5;
  color: #ffd700;
  font-size: 200%;
  font-family: Lato;
  text-align: center;
}

.bottom {
  position: absolute;
  bottom: 45px;
  width: 100%;
  /* float: left; */
  line-height: 1;
  display: flex;
  justify-content: space-between;
}

#one {
  background-color: #ffd700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" class="container">
  <div class="contentcontainer">
    <div class="maincontentcontainer" trigger="0">
      <h3>Test</h3>
      <img src="https://static1.squarespace.com/static/5463c1d9e4b065276e6675d3/t/5ae6d699562fa7d975d137ce/1525077665893/El+Cap.jpg"></div>
  </div>
  <div class="bottom">
    <h3 id="moreinfo" class="header">More info</h3>
  </div>
</div>
</div>