Question

我正在用wordpress进行ajax调用，当ajax调用完成后我慢慢淡出div（完美地工作）然后尝试淡入新数据，我目前正在使用jquery方法fadeIn（）。无论我在这个方法中加入什么数量或速度似乎都没有对速度产生影响，甚至不会像6000毫秒那样巨大。

谁能明白为什么？这是我的代码。

jQuery.post(ajaxurl, data, function(response) {

    jQuery('#mc_embed_signup').fadeOut('2000', function() {
        jQuery('#mc_embed_signup').replaceWith(response);
        jQuery('#mc_embed_signup').fadeIn('6000');
});

Answer 1

正如IrkenInvader在他的评论中指出的那样，当你的元素被替换时，你将失去对你元素的引用。

您可能希望将要替换的容器包装在另一个容器中，然后淡入/淡出此包装容器，如下所示：

<div id="wrapper">
    <div id="mc_embed_signup">...</div>
</div>

jQuery.post(ajaxurl, data, function(response) {
    jQuery('#wrapper').fadeOut(2000, function() {
        jQuery('#mc_embed_signup').replaceWith(response);
        jQuery('#wrapper').fadeIn(6000);
    });
});

此外，就像Asad提供的答案一样，fadeIn() / fadeOut()只接受数字（以毫秒为单位的时间）或带有实际名称的字符串，如slow或{{ 1}}。

值得一提的是，这些方法也接受了一个options对象，它提供了很多方法和属性：

http://api.jquery.com/fadein/

Answer 2

您必须先隐藏已替换的内容并将其淡入，

var replacedElem = null;
jQuery('#mc_embed_signup').replaceWith((replacedElem  = $(response).hide(),replacedElem));
replacedElem.fadeIn(6000);

您错误地选择了该元素。您必须缓存要替换的元素并根据您的要求对其进行操作。这就是隐藏和褪色。

Procedural demo

为什么我需要缓存用于替换的元素？ 一定是你的问题。

答案是，Document是这样说的。

与大多数jQuery方法一样，.replaceWith（）方法返回 jQuery对象，以便可以将其他方法链接到它上面。然而，必须注意的是返回原始的jQuery对象。这个 object指的是从DOM中删除的元素，而不是已取代它的新元素。

所以我们不能链接新替换的元素。我们必须在使用它之前将它存储在某处。

Answer 3

只给600而不是'600'。它接受整数值，如600而不是像'600'这样的字符串。或者你可以给

 .fadeIn('fast')

或

  fadeIn('slow') like this

jQuery fadeIn显示太快

3 个答案:

Procedural demo