0

我正在开发 Web 应用程序的前端。所有内容都是从我从后端收到的 JSON 对象生成的。然后我将这些内容包装在 HTML 中并将其添加到 DOM。我使用 jQuery append() 来做到这一点。添加内容后，我会为旧页面设置动画，并为新页面设置动画。

我的问题是在动画开始之前内容似乎没有完成加载。似乎并不是我所有的 CSS 都在动画开始之前生效。它仅在动画完成后显示。

我假设我需要在开始制作动画之前检查内容是否已完成附加。我知道 append() 应该是同步的，但检查起来不会有坏处。

这是一个代码片段，可让您了解所涉及的动画。（注意：这不是我的全部代码，只是让您了解我到底在做什么的最低限度）

  • 'mainTransitionContainer' 是添加了新内容的元素。
  • “transitionWidth”是一个变量，它使用旧页面和新页面的宽度来确定。
  • 这两个页面都在 mainTransitionContainer 内，彼此相邻浮动。
$(mainTransitionContainer).append(newElement);
$(mainTransitionContainer).ready(function () {
   $(mainTransitionContainer).animate({ right: transitionWidth }, 2000,'easeInOutQuart'});
});

这是检查内容是否已完成加载的正确方法吗？

有谁知道为什么我的内容没有正确显示？

jQuery 动画是否会影响我的 CSS 样式？

有人有建议吗？将不胜感激。

4

2 回答 2

1

大概，如果您使用 JSON 加载数据，您正在使用 Ajax 调用来检索数据？

您不能在.ready()这里真正使用该功能。这将在页面最初加载时触发，而不管之后可能发生的任何 Ajax 调用。它基本上在预期元素空闲时触发（即它已被更改，并且在更改完成且没有代码运行的第一刻，ready触发器将触发）

我不知道您的 ajax 调用是如何构建的，因为我在您的问题中没有看到任何片段，但这是您应该如何维护您想要的“加载、写入、然后动画”结构的粗略草图：

$.ajax({

    url: "http://my.url.com",

    type: 'get', //I assume. It could be 'post' dependent on what the code behind does.

    cache: false, //for good measure. IE will never execute the same request twice, unless you put this in.

    success: function(data_in_json_form) {

        var data_in_html_form = .... //Do something with the received data_in_json_form. You need to end up with a string of valid html code.

        $(mainTransitionContainer).append(data_in_html_form);

        //Now you can do the animation.
        $(mainTransitionContainer).animate({ right: transitionWidth }, 2000,'easeInOutQuart'});

    }

});

要记住的重要事项是：

  • 任何不在“成功”函数中的代码都将被执行，而无需完成 ajaxt 调用。Ajax 是异步工作的，因此浏览器会启动 ajax 请求，然后继续进行而不等待响应。
  • 附加确实同步工作。但是，当与 Ajax 调用结合使用时，请确保仅在“成功”函数中执行代码。
  • 触发器实际上.ready()应该只用于. $(document).ready()它可能适用于其他场景，但它几乎永远不是问题的正确解决方案。

这就是我对您所描述的问题的看法。如果我遗漏了什么，请发布更多代码，特别是您的 JSON 检索方法及其后面的任何代码。

于 2012-08-17T09:47:12.827 回答
0

我意识到我在其他地方犯了一个错误。问题已解决。内容是同步添加的，因此在内容添加完成时不需要触发任何事件。

于 2012-08-20T08:35:46.790 回答