CODEWITHSUNDEEP
jqueryjquery-ui
oJM86o
oJM86o

Reputation: 2118

Any reason why this div would not animate?

I cannot understand why a specific div (id=error) won't animate here's the div:

<asp:Content ID="SContent" ContentPlaceHolderID="MainMessageContent" runat="server">
    <div class="ui-widget" id="widget">
            <div id="error" runat="server" visible="false" style="padding: 0 .7em; margin-bottom:5px;">
                <p><span id="msgSpan" runat="server" style="float: left; margin-right: .3em;"></span>
                <strong>
                    <asp:Label ID="lblMessage" runat="server"></asp:Label>
                </strong></p>
            </div>
        </div>
</asp:Content>

And here's the jquery:

$("#MainMessageContent_error").animate({
        backgroundColor: "#FFB24B"
    },
                3000,
                function () {
                    $("#MainMessageContent_error").animate({ backgroundColor: "#fff" }, 3000);
                    $('#MainMessageContent_error').delay(10000).fadeOut('slow', function () {
                    });
                }
     );

It fades out but it does not animate.

Upvotes: 0

Views: 73

Answers (2)

jumancy
jumancy

Reputation: 1340

In order to use animate effect you need to plug-in jquery-ui library. In the core jquery library there is no such method.

Upvotes: 1

Robin Castlin
Robin Castlin

Reputation: 10996

A modern solution which you might wanna try is:

<style type="text/css">
#MainMessageContent_error {
    -webkit-transition: background-color 3s;
    -moz-transition: background-color 3s;
    transition: background-color 3s;

    background-color: #FFB24B;
}

#MainMessageContent_error.animate {
    background-color: #FFF;
}
</style>

And do a .addClass('animate'); on it.

If you wish to go back, simply .removeClass('animate'); it.

This gives a smooth animation which is less laggy. Before someone says "What about IE versions?" do note that this solution still works, but without the animation.

Upvotes: 1

Related Questions