javascript - TwentyTwenty 隐藏后点击显示没有高度

Question

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

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

这是 the link到网站。单击全部阅读以查看 TwentTwenty slider 。

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

Answer 1

这可能对其他人有帮助，但我想我来晚了。在 twentytwenty 脚本初始化之前隐藏 div 会产生奇怪的效果。您必须等待脚本加载，然后再加载图像。在您的示例中，您将更改:

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

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

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

希望这对其他人有帮助。