如何在 javascript 中以 2 秒延迟淡入内容

Question

我在提交时使用此 ajax 脚本来创建表单。我正在尝试用 2 秒让内容（php 回显）变快。但是内容立即出现并且没有淡入：

$(document).ready(function()
{
   $('#subscribe_newsletter').click(function(e) {

    e.preventDefault();

    $('#subscribe_newsletter').val($(this).val());
        var data = $("#subscribe").serialize();

    $.ajax({
    type : 'POST',
    url  : 'newsletter/email_subscribe.php',
    data : data,
    success :  function(data)
           {                   
                $(".subscribe_wrapper").fadeIn(2000).show(function()
                {
                    $(".subscribe_wrapper").html(data);

                });

           }
    });

   });

});

形式：

<div id="form" class="subscribe_wrapper"></div>
        <form id="subscribe" method="POST">
                <input  name="email_subscribe" placeholder="Uw Email" type="text" />
                <input class="subscribe_newsletter nex-bc nex-cc nex-bgch" id="subscribe_newsletter" type="submit" name="submit" value="Inschrijven">
        </form>

为什么2秒不快进？代码有问题吗？

Answer 1

嗯，你很亲近！

.subscribe_wrapper 应该作为开始隐藏（通过 CSS 或 jQuery）。

然后加载数据并将其淡入：

success :  function(data)
       {                

         $(".subscribe_wrapper").html(data);
         $(".subscribe_wrapper").fadeIn(2000, function()
                {
                 // Animation complete   
                });

Answer 2

.subscribe_wrapper 应该作为开始隐藏（通过 CSS 或 jQuery）。

然后加载数据并将其淡入：

success: function(data){                
    $(".subscribe_wrapper").html(data);
    $(".subscribe_wrapper").delay(2000).fadeIn();
}

Answer 3

fadeIn(2000)制作动画2秒log

替换为.delay(2000).fadeIn(500)

如何在 javascript 中以 2 秒延迟淡入内容

how to fadeIn content with 2 sec delay in javascript

javascript

ajax

fadein