将动画添加到DOM中的新内容

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

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

我认为我需要检查内容是否完成添加之前，我开始动画。我知道append（）应该是同步的，但是不能伤害到检查。

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

'mainTransitionContainer'是新内容添加到的元素。
'transitionWidth'是使用旧页面和新页面的宽度确定的变量。
这两个页面都位于mainTransitionContainer内部，彼此相邻。

$(mainTransitionContainer).append(newElement); 
$(mainTransitionContainer).ready(function() { 
    $(mainTransitionContainer).animate({ right: transitionWidth }, 2000,'easeInOutQuart'}); 
});

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

有没有人有另一种想法，为什么我的内容无法正确显示？

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

有没有人有任何建议？非常感谢。

来源

2012-08-17 phunder

你如何加载的内容？ 'ready'事件只对'document'有效，因为它将一个处理程序绑定到DOMReady事件，当您通过异步请求加载内容时不会触发该事件。 – 2012-08-17 08:43:00

谢谢Didier。这已经澄清了一些事情。我编辑了原始代码给你一个更好的主意。 'newElement'变量基本上是一个包含一些复杂HTML代码的字符串。然后使用append（）将其添加到'mainTransitionContainer'。 – phunder 2012-08-17 08:50:29

* * newElement的内容是如何产生的？通过ajax加载或简单地在JavaScript中建立？ – 2012-08-17 08:53:29

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

来源

2012-08-20 08:35:46 phunder

假设，如果您使用JSON加载数据，那么您正在使用Ajax调用来检索数据？

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

我不知道你的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'}); 

    } 

});

需要记住的重要事情：

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

这是我让你所描述的问题。如果我缺少一些东西，请发布更多代码，特别是您的JSON检索方法以及其后的任何代码。

来源

2012-08-17 09:47:12 Flater

将动画添加到DOM中的新内容

回答

相关问题