Comment est-ce que je disparais 1 div et fondu en 2 divs, puis après 10 secondes d'inactivité, fondu dans la 1ère div, et fondu 2 divs?

Question

Ceci est mon code actuellement:

$(function() {   
     $('#header_left').click(function(){ 
      $('#header_left_info').fadeOut('fast'); 
      $('#header_left').fadeOut('fast'); 
      $('#header_left_back').delay(250).fadeIn('fast'); 
     }); 
}); 

(le retard de 250 millisecondes est de sorte que les fades ne sont pas incompatibles)

Quoi qu'il en soit, je voudrais modifier ce code existant afin qu'il fane # header_left_back dehors, et #header_left retour à - mais seulement après 10 secondes d'inactivité par l'utilisateur. Cela devrait être simple, mais pour un concepteur web sans expérience jQuery - c'est vraiment difficile. Betcha vous les codeurs peuvent comprendre cela en 20 secondes!

Merci!

Cette question a été répondue. Merci!

Answer 1

Je pense que vous êtes après quelque chose comme ceci:

$(function() {   
    $('#header_left').click(function(){ 
    $('#header_left_info, #header_left').fadeOut('fast'); 
    $('#header_left_back').delay(250).fadeIn('fast'); 
    }); 

    var timer; 
    $(document).bind("keypress mousemove", function() { 
    clearTimeout(timer); 
    timer = setTimeout(function() { 
       $('#header_left_back').fadeOut('fast', function() { 
       $('#header_left').fadeIn('fast'); 
       }); 
      }, 10000); 
    }); 
}); 

Au bout de 10 secondes sans mouvement de la souris ou l'action du clavier, il irait le fondu dans le sens inverse, les échanger en arrière. Vous pouvez ajouter d'autres événements si nécessaire, par ex. mousewheel, mousedown, aussi spécifique que nécessaire. Chaque fois qu'un événement se produit, nous commençons un compte à rebours de 10 secondes, si un autre événement se produit, nous effaçons le délai et recommencons les 10 secondes, donc seulement 10 secondes d'inactivité font que les fondus se produisent à l'envers.

Answer 2

Paul irlandais a créé un idleTimer Plugin pour jQuery. C'est très pratique.