CODEWITHSUNDEEP
jqueryfadeinshow-hide
Fuego DeBassi
Fuego DeBassi

Reputation: 3017

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 and error and set me straight? Would very much appreciate it!

Upvotes: 0

Views: 1281

Answers (2)

The Muffin Man
The Muffin Man

Reputation: 20004

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');
       });
     });

Upvotes: 0

Blender
Blender

Reputation: 298136

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!

Upvotes: 1

Related Questions