tags:

views:

143

answers:

4

I'm trying to do something I thought was simple, but I'm not having any luck actually getting it to work. All I want to do is fade out a div after X number of seconds have passed since the document finished loading.

In my Site.Master file I have the following:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <!-- various other links, etc commented for brevity -->
    <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery-1.2.6.js")%>"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        $("#notify-container").fadeOut(2000);
    }
    </script>

</head>

<body class="page">
    <%
    if (Html.ViewContext.TempData.ContainsKey("StatusMessage")) {
        %>
        <div id="notify-container"><%=Html.ViewContext.TempData["StatusMessage"]%></div>
        <%
    }
    %>
    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
</html>

The problem is that nothing fades. What have I overlooked?

+7  A: 

I think you're missing a little of your code

$(document).ready(function() {
    $("#notify-container").fadeOut(2000);
}

Should be...

$(document).ready(function() {
    $("#notify-container").fadeOut(2000);
}); // <---
Hugoware
bah! i knew it was something obvious. thanks.
Sailing Judo
A: 

The argument passed to fadeOut is the speed however. If you want there to be some delay before that effect is fired, you'll need to use setTimout().

mikeycgto
+1  A: 

I think you are missing the closed parenthesis, and semi-colon.

);

at the end of your script tag for the document ready function.

Acorn
A: 

For future reference, the best way to delay things from happening is to .fadeTo(delaytime, 1); the object you want to animate, delaytime would be how long you want to delay it from happening by. It just "fades" the already totally visible object to the value it already has, wasting the exact amount of time you tell it to.

Sneakyness