jQuery fadeToggle not working properly due to bug with delay?

I have a div that is being used an a email newsletter signup form. Upon clicking a link, this div is shown and the user sees a textbox and button and an option checkbox. Upon submission of the email address, the following code is fired:

$.post("/asynchronous/addEmail.aspx", 
{email: $(".emailPopupTextBox").val(开发者_如何学C), optin: thisOptIn }, 
function (data) { 
    $(".emailText").hide(); 
    $(".thankYouText").show();
    $('.emailPopupBox').delay(800).fadeToggle(); });

On return, the contents of the div are hidden (checkbox, button, and textbox) and a welcome message is shown to the user. At first, this was happening too fast and the email popup was just disappearing too fast. So, I added the .delay and now the emailpopup div shows the welcome message, runs the delay and the togglefade runs but instead of just disappearing as it should, it quickly disappears and flashes real quick and stays visible with the thank you message. If I click the link I initially clicked to fadeToggle the div to appear, it simply makes the div flash real quick but will not hide.

EDIT: It seems after the .post that the .fadeToggle no longer functions properly. I am tracking this problem down.

---

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

Try that, if not post your code to jsfiddle

---

Instead of delay you can use easing either by putting "slow" or pass the delay time.

Like:

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

---

Edit

// 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); 
    });
);

---

Try to have the code execute after the promise.Also, unless you are using the data, you probably wont need to pass that to a function either.

$.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();
});