Question

我无法理解为什么特定的div（id = error）不会在这里动画为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>

这是jquery：

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

它淡出但没有动画。

Answer 1

您可能想尝试的现代解决方案是：

<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>

并对其进行.addClass('animate');。

如果您想返回，只需.removeClass('animate');。

这给出了一个平滑的动画，它不那么迟钝。在有人说“IE版本怎么样？”之前请注意，此解决方案仍然有效，但没有动画。

Answer 2

要使用动画效果，您需要插入jquery-ui库。在核心jquery库中没有这样的方法。

任何理由为什么这个div不会动画？

2 个答案: