jQuery delayed fadeIn effect

I'm just trying to do two simple adjutments to this snippet:

$(document).ready(function() {
   $("span#poweroff a").click(function() {
      $("body").append('<div class="overlay"></div>');
   });
 });

First I would like the body.append action to happen over time. It's just a blackout overlay, but I would like to fade in?

Second when someone hovers "span#poweroff a" I would like, after a certain amount of time to show "span#poweroff a .message", also by fadeing in.

Any guru's out there willing to save me what could me quite a long time putzing with trial 开发者_Python百科and error and set me straight? Would very much appreciate it!

Try .delay(). It's probably what you're looking for. As for your code, here are the functions you're probably looking for:

$(document).ready(function()
{
  $('span#poweroff').click(function()
  {
    $('body').append('<div class="overlay"></div>'); /* Make sure it's hidden via CSS, and has *some* uniqueness. */
    $('.overlay:eq(0)').fadeIn(); /* ':eq(0)' selects the first .overlay element. If you want all of them to animate, remove ':eq(0)'. I would use an ID for this, though, so if you decide to, replace the selector with '#your_id'. It's not too hard */
  });

  $('span#poweroff a').hover(function()
  {
    $('span#poweroff a .message').delay(1000)fadeIn(); /* You can set your speeds here too. If you won't use the delay, just omit the function. */
  }, function() {
    $('span#poweroff a .message').fadeOut(); /* If you want to, it can fade out. Otherwise, omit this function. */
  });  
});

This would work as a rough framework (no guarantees, as I am notorious for making small mistakes).

Good luck!

You need to hard code the overlay div like this:

<div class="overlay" style="display:none;"></div>

Then the jQuery like so:

    $(document).ready(function() {
   $("span#poweroff a").click(function() {
      $('.overlay').fadeIn('slow');
   });
 });

If I'm understanding you correctly, when someone clicks on span#poweroff it will slowly show the overlay div.

My question to you is what happens when you mouse over the span#poweroff a before clicking on it and showing the .overlay? If you go to click on it its going to activate the delayed show because you have to hover over it to click on it.

Here is the jQuery without handling if we need to wait for the overlay to be visible:

    $(document).ready(function() {
       $("span#poweroff a").mouseenter(function() {
          $('.message').fadeIn('slow');
       });
       $("span#poweroff a").mouseleave(function() {
          $('.message').fadeOut('slow');
       });
     });