OnClick函数无法正确用于重新定位内容

时间：2019-04-02 19:26:32

标签： javascript jquery html css

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

我正在尝试创建一个onclick事件，在其中单击.maincontentcontainer时会重新定位#moreinfo。

但是，当我第二次单击它时，它不会返回到其原始位置，并且当我第三次，第四次单击时，它也无法工作。

任何帮助都会很棒

$(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>

3 个答案:

答案 0 :(得分：2)

要解决您的原始问题，请在else语句中将图像推得太远。将left: 50%更改为left: 20%，将图像移回原始位置。

此外，为了能够重复单击它，您需要重置图像的位置。为此，您可以在右侧的动画中添加left: 0，在左侧的动画中添加right: 0。

$(document).ready(function() {
   var moved = false;
    $("#moreinfo").click(function() {
	      if ($(".maincontentcontainer").attr("trigger") === "0") {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({right: "50%",left:0});
	        $(".maincontentcontainer").attr("trigger", "1");
	      } else {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({left: "20%",right:0});
	        $(".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;
}
#moreinfo{
  z-index:10;
}
<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>

答案 1 :(得分：0)

  • 首先，即使图像位于顶部，也要单击moreInfo文本，应将#moreinfo元素的z-index设置为大于图像中的1。
  • 第二个问题是，每次应用动画时，必须重置image和h3元素的left或right属性。

在下面查看代码。希望这会有所帮助。

$(document).ready(function() {
   var moved = false;
    $("#moreinfo").click(function() {
	      if ($(".maincontentcontainer").attr("trigger") == "0") {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({ right: "50%", left: 0});
	        $(".maincontentcontainer").attr("trigger", "1");
	      } else {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({left: "50%", right: 0});
	        $(".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;
  z-index: 999;
  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>

答案 2 :(得分：0)

我看到两个问题，一个是<h3>覆盖了More info，所以您不能再次单击它，以证明这是我更改了它的z-index。
另一个问题是，您的图像最终会左移50％，右移50％，因此不会出现动画，您必须为每个动画清除一个。

$(document).ready(function() {
   var moved = false;
    $("#moreinfo").click(function() {
	      if ($(".maincontentcontainer").attr("trigger") === "0") {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({right: "50%",left:0});
	        $(".maincontentcontainer").attr("trigger", "1");
	      } else {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({left: "50%",right:0});
	        $(".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;
}
#moreinfo{
  z-index:10;
}
<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>

相关问题
最新问题