Javascript OnClick函数在重新定位内容时无法正常工作

我当前的代码有两个问题

我正在尝试创建一个

onclick

事件，当单击

#moreinfo

时，

.maincontentcontainer

将被重新定位

但是，当我第二次单击它时，它不会返回到其原始位置，当我第三次、第四次单击它时，它也不会工作，等等

任何帮助都会很好

$（文档）.ready（函数（）{
var=false；
$（“#更多信息”）。单击（函数（）{
if（$（“.maincontentcontainer”）.attr（“触发器”）=“0”）{
$（“.maincontentcontainer img，.maincontentcontainer h3”）.animate（{右：“50%”）；
$（“.maincontentcontainer”）.attr（“触发器”、“1”）；
}否则{
$（“.maincontentcontainer img，.maincontentcontainer h3”）.animate（{左：“50%”）；
$（.maincontentcontainer”）.attr（“触发器”，“0”）；
}
});
}); 
.container{
高度：100vh；
}
.contentcontainer{
位置：相对位置；
身高：继承；
底部：0；
}
.maincontentcontainer{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
高度：100vh；
}
.maincontentcontainer img{
位置：绝对位置；
最高：20%；
-o-对象配合：盖；
对象匹配：覆盖；
-o-对象位置：底部；
物体位置：底部；
身高：60%；
宽度：60%；
不透明度：1；
-webkit转换：不透明度.25s；
过渡：不透明度.25s；
-webkit过滤器：灰度（100%）；
/*Safari 6.0-9.0*/
滤镜：灰度（100%）；
}
.maincontentcontainer h3{
位置：绝对位置；
最高：45%；
-o-对象配合：盖；
对象匹配：覆盖；
-o-对象位置：底部；
物体位置：底部；
身高：60%；
宽度：60%；
不透明度：1；
-webkit转换：不透明度.25s；
过渡：不透明度.25s；
z指数：5；
颜色：#ffd700；
字体大小：200%；
字体系列：Lato；
文本对齐：居中；
}
.底部{
位置：绝对位置；
底部：45px；
宽度：100%；
/*浮动：左*/
线高：1；
显示器：flex；
证明内容：之间的空间；
}
#一个{
背景色：#ffd700；
}

试验
更多信息

首先，为了能够单击moreInfo文本（即使图像位于该文本之上），您应该将
#moreInfo
元素的z索引设置为大于图像中的1
第二个问题是，每次应用动画时，必须重置图像和h3元素的“左”或“右”属性

查看下面的代码。希望这有帮助


$（文档）.ready（函数（）{
var=false；
$（“#更多信息”）。单击（函数（）{
if（$（“.maincontentcontainer”）.attr（“触发器”）=“0”）{
$（“.maincontentcontainer img，.maincontentcontainer h3”）.animate（{右：“50%”，左：0}）；
$（“.maincontentcontainer”）.attr（“触发器”、“1”）；
}否则{
$（“.maincontentcontainer img，.maincontentcontainer h3”）.animate（{左：“50%”，右：0}）；
$（.maincontentcontainer”）.attr（“触发器”，“0”）；
}
});
});
.container{
高度：100vh；
}
.contentcontainer{
位置：相对位置；
身高：继承；
底部：0；
}
.maincontentcontainer{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
高度：100vh；
}
.maincontentcontainer img{
位置：绝对位置；
最高：20%；
-o-对象配合：盖；
对象匹配：覆盖；
-o-对象位置：底部；
物体位置：底部；
身高：60%；
宽度：60%；
不透明度：1；
-webkit转换：不透明度.25s；
过渡：不透明度.25s；
-webkit过滤器：灰度（100%）；
/*Safari 6.0-9.0*/
滤镜：灰度（100%）；
}
.maincontentcontainer h3{
位置：绝对位置；
最高：45%；
-o-对象配合：盖；
对象匹配：覆盖；
-o-对象位置：底部；
物体位置：底部；
身高：60%；
宽度：60%；
不透明度：1；
-webkit转换：不透明度.25s；
过渡：不透明度.25s；
z指数：5；
颜色：#ffd700；
字体大小：200%；
字体系列：Lato；
文本对齐：居中；
}
.底部{
位置：绝对位置；
底部：45px；
宽度：100%；
/*浮动：左*/
线高：1；
z指数：999；
显示器：flex；
证明内容：之间的空间；
}
#一个{
背景色：#ffd700；
}

试验
更多信息
我看到两个问题，一个是
涵盖了
更多信息
，因此您不能再次单击它，为了证明这一点，我更改了它的z索引。

另一个问题是，您的图像最终有左：50%和右：50%，因此不会出现动画，您必须为每个动画清除一个


$（文档）.ready（函数（）{
var=false；
$（“#更多信息”）。单击（函数（）{
if（$（“.maincontentcontainer”）.attr（“触发器”）=“0”）{
$（“.maincontentcontainer img，.maincontentcontainer h3”）.animate（{右：“50%”，左：0}）；
$（“.maincontentcontainer”）.attr（“触发器”、“1”）；
}否则{
$（“.maincontentcontainer img，.maincontentcontainer h3”）.animate（{左：“50%”，右：0}）；
$（.maincontentcontainer”）.attr（“触发器”，“0”）；
}
});
});
.container{
高度：100vh；
}
.contentcontainer{
位置：相对位置；
身高：继承；
底部：0；
}
.maincontentcontainer{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
高度：100vh；
}
美因茨先生