effet retardé jQuery fadeIn

Question

Je suis juste essayer de faire deux adjutments simples à cet extrait:

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

D'abord, je voudrais l'action body.append se passer au fil du temps. C'est juste une superposition, mais j'aimerais fondre?

deuxième quand quelqu'un plane « # span POWEROFF un » Je voudrais, après un certain laps de temps pour montrer « # span POWEROFF un .message », aussi par fadeing dans.

sur de ne importe quel gourou il prêt à sauve-moi ce qui pourrait me mettre un bon bout de temps à faire des essais et des erreurs et à me redresser? Je l'apprécierais beaucoup!

Answer 1

Vous devez coder en dur la superposition div comme ceci:

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

Puis le jQuery comme ceci:

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

Si je vous comprends bien, quand quelqu'un clique sur la durée # poweroff il montrera lentement la division overlay. Ma question est la suivante: que se passe-t-il lorsque vous passez la souris sur la plage # poweroff a avant de cliquer dessus et d'afficher le fichier .overlay? Si vous allez cliquer dessus, cela va activer le show retardé car vous devez passer la souris dessus pour cliquer dessus.

Voici le jQuery sans manipulation si nous devons attendre que la superposition soit visible:

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

Answer 2

Essayez .delay(). C'est probablement ce que vous cherchez. En ce qui concerne votre code, voici les fonctions que vous êtes probablement pour:

$(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. */ 
    }); 
}); 

Cela fonctionnerait comme un cadre rude (aucune garantie, comme je suis connu pour faire des petites erreurs).

Bonne chance!