Masquer un DIV après 5 secondes ou lorsque l'utilisateur clique sur le lien étroit

Pour référence, veuillez consulter le jsFiddle lien ici. Voici un petit script qui affiche un stackoverflow style de message pop-up. Ce que je veux faire est de donner à l'utilisateur la possibilité de laisser le message en aller tout seul au bout de 5 secondes ou pour faire disparaître le message en cliquant sur le " X " sur le côté droit de la boîte de dialogue de message.

J'ai essayé d'ajouter un retard:

$("#message").fadeIn('slow').delay(5000).queue(function() {
    $('#message').fadeOut('slow');
});

Qui fonctionnera, mais lors de l'événement onClick sur le 'X' pour fermer la boîte de dialogue de message ne se déclenche pas.

Toute aide serait grandement appréciée.

En cliquant sur le " X "fonctionne très bien...vous devez vous assurer que vous n'êtes pas, en cliquant sur "Suite" dans le violon coin, elle ne le feu.
Correct, il fonctionne, mais lorsque j'ajoute le délai de fadeOut la DIV au bout de 5 secondes, le onClick ne fonctionne plus. Je voudrais avoir les deux - sens, si l'utilisateur ne veut pas fermer la boîte de dialogue après 5 secondes, puis on va se fermer tout seul.
J'ai changé le style CSS pour #message à top:80 pour l'obtenir hors de la Result indicateur.
Notez que vous n'avez pas besoin .queue(), vous pouvez juste dire $("#message").fadeIn('slow').delay(5000).fadeOut('slow');

InformationsquelleAutor Andy Evans | 2013-07-16

2

Essayez ceci:
```
$("#message").fadeIn('slow').delay(5000).fadeOut('slow');

$('#message a.close-notify').click(function () {
    $('#message').stop().fadeOut('slow', removeMessageLayer);
    $('#messageContainer').text();
    return false;
});
```
Démo: http://jsfiddle.net/xSRk8/15/

La raison pour laquelle cliquant sur le X pour fermer cessé de fonctionner lorsque vous avez ajouté l'auto fade, c'est que jQuery files d'attente les méthodes d'animation, donc, dans votre gestionnaire de clic où vous avez essayé de fadeOut() l'élément fondu au noir a été ajouté à la file d'attente après le retard. Si vous appelez .stop() il annule toute existantes en file d'attente des effets de sorte que vous pouvez faire le fadeOut() immédiatement.

Également votre removeMessageLayer() fonction n'a pas fait de supprimer le message de l'élément au tout - vous seulement pensé qu'il était parti parce qu'il avait disparu. Votre code
```
$('body').remove('#message');
```
...dit pour supprimer l'élément de corps si il correspond au sélecteur passé à remove(), qui, bien sûr, il ne se serait jamais. Vous avez besoin $('#message').remove();, et vous n'avez pas besoin de vérifier si le message de l'élément existe tout d'abord parce que jQuery ignore le plus souvent la .remove() si elle est appelée à vide sur un objet jQuery. Afin d'utiliser cette:
```
function removeMessageLayer() {
    $('#message').remove();
}
```
- Qui était-il! Merci!
InformationsquelleAutor nnnnnn
2

Probablement pas le plus propre, mais vous pouvez ajouter un setTimeout appel à la fin de votre displayMessage fonction.
```
    timeout = setTimeout(function() {
        $('#message').fadeOut('slow');
        $('#messageContainer').text();
        removeMessageLayer();
        return false;
    }, 5000);
```
Et puis dans votre gestionnaire de clic, appelez clearTimeout(timeout) pour annuler le délai d'attente.

J'ai mis à jour votre violon avec cette. Semble fonctionner.

Mise à JOUR: le code n'est pas propre-j'ai répété certaines choses. Mais je vais laisser le nettoyer comme un exercice futur. 🙂

InformationsquelleAutor David Hoerster
2
```
$(body).on('click','#message a.close-notify',function () {
    $('#message').fadeOut('slow');
    $('#messageContainer').text();
    removeMessageLayer();
    return false;
});
```
parce qu'il est créé dynamiquement élément, la meilleure pratique, dit l'événement click doit être déléguée.
```
    $("#message").fadeIn('slow',function() {
        $(this).delay(5000).fadeOut('slow');
    });
```
Cela vous donnera vos cinq secondes de retard basé sur le succès de la création du message.
- Un délégué du gestionnaire peut être plus raisonnable, mais vous n'avez pas besoin dans ce cas, parce que les OP du code appelé .click() après de la création de l'élément en question.
- Je suis tout simplement en essayant de promouvoir best practice tout en répondant à des questions. Vous avez raison, il n'est pas NÉCESSAIRE, mais il est préférable et j'ai édité ma réponse pour refléter cela.
- Notez que si vous utilisez un délégué du gestionnaire comme ça, que le code devrait être déplacé hors de la displayMessage() fonction, sinon il va se lier supplémentaires gestionnaires à chaque fois qu'un message est affiché.
- Seriez-vous plus heureux si j'ai juste supprimé ma réponse?
- Désolé. Non, je pense qu'un délégué du gestionnaire est une belle alternative.
InformationsquelleAutor DevlshOne

Le code sera (testé )

$("#message").fadeIn('slow').delay(5000).fadeOut('slow'); //display message div
$('#message-close').click(function () {   //click close button
$('#message').stop().fadeOut('slow');

 return false;
});

$(document).on('keydown', function(e) {

if (e.keyCode === 27) {
   $('#message').stop().fadeOut('slow'); //close div when Esc key is pressed
      }
  });
});

InformationsquelleAutor user1526780

Vous devez vous connecter pour publier un commentaire.