CODEWITHSUNDEEP
jqueryasp.netfade
nickson104
nickson104

Reputation: 580

fadein/fadeout not fading correctly

I am currently using jquery to fade between div's to be displayed on a page. These functions work perfectly on numerous pages in the same project, and also used to work on the page I am now having issues with. Here is an example of the working code:

    $(document).ready(function () {
        $("#<%=btnNew.ClientID %>").click(function () {
            $("#divView").fadeOut("100",
            function () {
                $("#divAddEmployee").fadeIn("100");
            });
        });
        $("#btnCancel").click(function () {
            $("#divAddEmployee").fadeOut("100",
            function () {
                $("#divView").fadeIn("100");
            });
        });
    });

This works just how I want it to, however on the problematic page, the equivelant functions do not operate correctly.

    $(document).ready(function () {
        $("#<%=btnNew.ClientID %>").click(function () {
            $("#divView").fadeOut("100",
            function () {
                $("#divNew").fadeIn("100");
            });
        });
        $("#btnCancel").click(function () {
            $("#divNew").fadeOut("100",
            function () {
                $("#divView").fadeIn("100");
            });
        });
    });

This function still effectively toggles the divs, however it no longer actually performs the fade animation. The page looks like it is posting back, however it is not and so should provide a smooth transition by fading. What could have led to this?

Upvotes: 1

Views: 538

Answers (1)

nickson104
nickson104

Reputation: 580

The issue was with the CSS and the Jquery combined. An absolute positioned element cannot fade, it can either be shown or not. My solution was to forget about vertical centering and use another method for horizontal center, whilst this was not quite what I wanted, it was one of the easiest methods of dealing with the issue

Upvotes: 1

Related Questions