我当前的代码有两个问题.
我正在尝试创建一个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>