title: JQuery fadeIn Delay FadeOut
body: <p>I'm trying to fade in a div, keep it on screen for a few seconds then fade it out. The problem is its not staying on screen as long as I expect, even setting the delay for about 10 seconds, it only stay on screen briefly. I've read through many posts and tried many things such as settimeout but I'm going nowhere fast.</p>
  
  <p>Here's my script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function pageLoad() {
      $("[id*=lnkSelect]").live("click", function () {
      var price = $("#price").html($(".prodprice", $(this).closest('tr').prev().children   ('td.prodpricelabel')).html());
      var code = $("#code").html($(".prodcode", $(this).closest('tr').prev().prev().children ('td.prodcodelabel')).html());
      //Build the new HTML
      $(code).prepend("&lt;br/&gt;Item: ");
      $(code).append("&lt;br/&gt;Has been&lt;br/&gt;added to your cart.&lt;br/&gt;Price: ");
      $(".tooltipleft").html(code); //Set the new HTML
      $(".tooltipleft").append(price);
      $(".tooltipleft").fadeIn('slow').delay(5000).fadeOut('slow');
      });
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>So I'm getting the product code and price from the html, modifying the html in the div then fading this in as a notification that an item has been added to the shopping cart.</p>
  
  <p>This is the div that I want to fade in:</p>
  
  <pre><code>&lt;div class="tooltipleft" id="tooltip"&gt;
      &lt;span id="code"&gt;&lt;/span&gt;&lt;span id="price"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the button in the grid:</p>
  
  <pre><code>&lt;asp:ImageButton ID="lnkSelect" runat="server" ImageUrl="~/Buttons/add_to_cart.png"
      AlternateText="Add To Cart" CommandArgument='&lt;%# Eval("ProductID") %&gt;' CommandName="Add"
      ImageAlign="Right" /&gt;
  </code></pre>