javascript - 隐藏隐藏然后单击显示后没有高度的二十

我的页面上有Foundation TwentyTwenty，但是在第一次加载时，此内容已隐藏。单击按钮后，该按钮将可见，但有时，TwentyTwenty容器没有任何高度。

FireFox看起来不错，但是chrome和IE没有高度。现在，在我的计算机上，并且我正在寡妇7上使用IE 11，IE可以正常工作。 Chrome没有。在其他Windows 7计算机上，即使使用最新版本，IE和chrome也无法使用。

这是该站点的the link。单击全部阅读以查看TwentTwenty滑块。

<script type="text/javascript">
$(document).ready(function() {
  $("#container1").twentytwenty();
  // hide here after twentytwenty load in this div.
  $("#yalecontent").hide("fast");

  $(".openthis").click(function() {
    $("#yalecontent").show("slow");
  });
});
</script>

最佳答案

这可能会帮助其他人，但我认为我已经很晚了。在初始化二十二十个脚本之前隐藏div会产生奇怪的效果。您必须等待脚本加载，然后再加载图像。在您的示例中，您将更改：

<script type="text/javascript">
$(document).ready(function() {
  $("#container1").twentytwenty();

<script type="text/javascript">
$(document).load(function() {
  $("#container1").twentytwenty();

然后，在二十二十个插件初始化之后隐藏图像。我想我读过其他地方通过在图像加载后调用脚本来重新初始化脚本，但是不要这样做，因为它将在现有脚本的顶部添加另一个UI层。

希望这对其他人有帮助。