由于延迟错误，jQuery fadeToggle无法正常工作？

Question

我有一个正在使用电子邮件简报注册表单的div。单击链接后，将显示此div，用户将看到一个文本框和按钮以及一个选项复选框。提交电子邮件地址后，将触发以下代码：

$.post("/asynchronous/addEmail.aspx", 
{email: $(".emailPopupTextBox").val(), optin: thisOptIn }, 
function (data) { 
    $(".emailText").hide(); 
    $(".thankYouText").show();
    $('.emailPopupBox').delay(800).fadeToggle(); });

返回时，隐藏div的内容（复选框，按钮和文本框），并向用户显示欢迎消息。起初，这种情况发生得太快，电子邮件弹出窗口消失的速度太快了。所以，我添加了.delay，现在emailpopup div显示欢迎消息，运行延迟和togglefade运行，但不是只是消失，它会很快消失并快速闪烁并保持可见谢谢你信息。如果我点击链接我最初点击fadeToggle div显示，它只是让div闪存快速但不会隐藏。

编辑：.post之后似乎.fadeToggle不再正常运行。我正在追踪这个问题。

Answer 1

$.post("/asynchronous/addEmail.aspx", 
{email: $(".emailPopupTextBox").val(), optin: thisOptIn }, 
function (data) { 
    $(".emailText").hide(); 
    $(".thankYouText").show();
    $('.emailPopupBox').fadeToggle(800); 
});

试试，如果不将你的代码发布到jsfiddle

Answer 2

而不是延迟，你可以通过放置“慢”或通过延迟时间来使用缓动。

像：

$.post("/asynchronous/addEmail.aspx", 
    {email: $(".emailPopupTextBox").val(), optin: thisOptIn },
    function (data) { 
        $(".emailText").hide("slow"); 
        $(".thankYouText").show("slow"); 
        $('.emailPopupBox').fadeToggle("slow"); 
    });
);

---

修改

// You can change easingFactor to get the desired easing.

var easingFactor = 800;

$.post("/asynchronous/addEmail.aspx", 
    {email: $(".emailPopupTextBox").val(), optin: thisOptIn },
    function (data) { 
        $(".emailText").hide(easingFactor); 
        $(".thankYouText").show(easingFactor); 
        $('.emailPopupBox').fadeToggle(easingFactor); 
    });
);

Answer 3

尝试使代码在Promise之后执行。此外，除非您正在使用数据，否则可能也不需要将其传递给函数。

$.post("/asynchronous/addEmail.aspx", 
{email: $(".emailPopupTextBox").val(), optin: thisOptIn }
}).done(function(){ //have the code execute after the promise is returned. 
    $(".emailText").hide(); 
    $(".thankYouText").show();
    $('.emailPopupBox').delay(800).fadeToggle();
});