Jquery 为新添加到DOM的内容设置动画

我正在开发一个web应用程序的前端。所有内容都是从后端接收的JSON对象生成的。然后，我将此内容包装为HTML并将其添加到DOM中。我使用jQuery append（）完成此操作。一旦添加了内容，我就会将旧页面设置为动画，将新页面设置为动画

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

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

下面是一段代码片段，让您了解所涉及的动画。（注意：这不是我所有的代码，只是一个简单的最低限度，让你知道我到底在做什么）

• “mainTransitionContainer”是添加新内容的元素
• “transitionWidth”是一个使用新旧页面宽度确定的变量
• 这两个页面都位于mainTransitionContainer内部，彼此相邻浮动

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

有人知道为什么我的内容显示不正确吗

jQuery动画可能会影响我的CSS样式吗

---

有人有什么建议吗？非常感谢。

如果您使用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'});

    }

});

要记住的重要事项是：

• 任何不在“success”函数中的代码都将被执行，而无需完成ajaxt调用。Ajax是异步工作的，因此浏览器启动Ajax请求，然后在不等待响应的情况下继续工作
• Append是同步工作的。但是，当与Ajax调用结合使用时，请确保仅在“success”函数中执行代码

• .ready（）

  触发器实际上只能用于

  $（document）.ready（）

  。它可能适用于其他场景，但它几乎从来都不是问题的正确解决方案

---

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

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

如何加载内容？

ready

事件仅适用于

文档

，因为它将处理程序绑定到DOMReady事件，当您通过异步请求加载内容时不会触发该事件。谢谢Didier。这已经澄清了一些事情。我对原始代码进行了编辑，以便更好地理解。“newElement”变量基本上是一个包含一些复杂HTML代码的字符串。然后使用append（）将其添加到“mainTransitionContainer”。如何生成

newElement

content？通过ajax加载还是简单地用javascript构建？目前我还处于测试阶段，所以我只是构建了一个长字符串。内容部分在动画之前显示，全部在动画之后显示。问题是我在动画中只看到部分内容。如果我尝试使用较少的内容，它会非常好地工作。你能在JSFIDLE上举个例子吗？在动画方面，更为详细的测试用例（包括

mainTransitionContainer

和

newElement

的HTML+CSS）更容易准确地了解到底发生了什么/出了什么问题。

$.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'});

    }

});