我当前的代码有两个问题.
我正在尝试创建一个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>
最佳答案
为了解决您的原始问题,您在else语句中将图像推得太远了.左移：50％左移：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",.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>
