jQuery 的 fadeIn() 和 hide() 的困难答案

【问题标题】：Difficulties with jQuery's fadeIn() & hide()jQuery 的 fadeIn() 和 hide() 的困难
【发布时间】：2011-01-06 06:19:01
【问题描述】：

我猜我误解了如何完成我通过 jquery.form.js 添加的元素的fadeIn()，但是在尝试了我在其他帖子上找到的东西之后，我一无所获。我还在学习 jQuery 和 javascript，所以我的错误可能很简单。

我的 jquery.form.js ajaxForm 中有以下代码行

jQuery('#aThankYouTarget').append(jQuery("<p>"+data+"</p>")).fadeIn(1000);

我已经尝试过这条线的变化，似乎看不到褪色的结果。我的数据完全按预期出现，只是缺少淡入淡出。我也尝试过像下面这样放置一个 hide()，但是当我这样做时，隐藏似乎可以工作，但 fadeIn 也从来没有发生在那里。

jQuery('#aThankYouTarget').append(jQuery("<p>"+data+"</p>").hide()).fadeIn(1000);

也正如这里另一个问题所建议的那样，我尝试了如下数据。我认为无论如何我使用的是“文本”，因为我早就忘记了那个人在它不起作用时的建议。

jQuery('#aThankYouTarget').append(jQuery("<p></p>").text(data.content).hide()).fadeIn(1000);

我真的更喜欢与我的第一个示例类似的东西，因为它使 javascript 的段落部分看起来最像最终的 html，我觉得它更容易阅读，但如果有人想说服我创建元素，并向其中添加文本，我可能会被说服。最重要的是我找到了如何让 fadeIn() 工作。

谢谢。

编辑：#aThankYouTarget 是一个 div，其中包含段落。当页面加载时，一些段落可能已经存在。我希望做的fadeIn是表单提交后任何新添加的段落淡入。

【问题讨论】：

为了安全起见，我建议您使用$('<p>').text(data) 来限制data 格式错误并插入您不想要的内容的任何可能性。然而，两者都是可以接受的，而且真的只是个人意见。
@Brad Christie，我知道这即将到来 :)，这就是为什么我提到我可以被说服 :)。我要睡在上面。我无法决定我更喜欢哪种方式。谢谢你让我思考，我相信这是件好事。
只是轻推。这取决于您是否感到舒适。 ;-)
@Brad Christie，是的。我可能不得不把它们都写在一张纸上，然后在我吃早餐的时候盯着它们看：D。我很欣赏你的建议，只是还不确定我是否会走那条路。非常感谢。

【解决方案1】：

你非常接近。你确实需要先.hide()，但你淡化错了！

jQuery("<p>"+data+"</p>").appendTo('#aThankYouTarget').hide().fadeIn(1000);

注意：切换顺序，使<p> 成为主要对象。 .hide() 和 .fadeIn() 现在都将在 <p> 上运行，在它已被附加。

【讨论】：

是的。我的意图是让
foo
成为淡入的部分。一个例子就是我现在正在输入的这个评论框。我希望我刚刚输入的“评论”淡入，但以前的内容应该保持不变。所以我相信我完全打算在
上做一些时尚，但什么也没得到。
@wilbbe01，不确定您的问题。在那种情况下，你是在 fading 错误的事情。我已经更新了我的答案。
那真是太棒了。我确实记得查看 jquery api 并阅读有关 appendTo 与 append 的信息。也许我一开始就做了 appendto 会更有意义。现在看了之后，这也有效。 jQuery('#aThankYouTarget').append(jQuery("
"+data+"
").hide().fadeIn(1000));我在看它的功能太像我想的那样。我从左到右阅读并停在点处......并将其视为“我到底为什么要在附加之前淡入？”）这导致我将淡入放在最后。非常感谢您的帮助。