Question

I have a login form and a link with ‘Register’ title beneath the form. I want it when user click on ‘Register’ link, the login fade out and register form fade in. I used the following script to that :

  $("#loginArea").fadeOut(2000, function () {
                        $("#RegisterArea").fadeIn(2000, function () { 
                        $("#RegisterArea").empty().append(mydata); });
                        //$("#RegisterArea").empty().
                    });

using the above code, the login form fade out, but fade in for regsiter form does not work and just put ‘mydata’ content in ‘RegisterArea’ without animating.

Can you help me ?

Answer 1

I think you might want to do this:

$("#loginArea").fadeOut(2000, function () {
    $("#RegisterArea").empty().hide().append(mydata);
    $("#RegisterArea").fadeIn(2000);
});

If the Register area is empty while fading in you won’t see it, so first fill it with content, then fade it in 🙂