À l'aide de JQuery, comment puis-je faire un <div> apparaissent, puis ajouter un peu de html, puis retirez le html puis cacher la div?

<div id="message" style="display: none">
 <!-- Here I want to place a message. It should be visible for 3 seconds.Then clear the      div to get ready for the next message. -->
</div>

Comment puis-je effectuer les opérations suivantes à l'aide de JQuery ?

1.Insérer un message dans div id="message" et de faire une div visible.
2.Rendre le message visible pendant 3 secondes.
3.Supprimer le contenu de la div "message".
4.Cacher la div et, si nécessaire, commencez à l'étape 1.

Vous en remercie d'avance.

OriginalL'auteur iHello | 2009-08-03

  1. 5

    Vous pouvez faire quelque chose comme ceci:

    var $messageDiv = $('#message'); //get the reference of the div
$messageDiv.show().html('message here'); //show and set the message
setTimeout(function(){ $messageDiv.hide().html('');}, 3000); //3 seconds later, hide
                                                             //and clear the message

    OriginalL'auteur CMS

  2. 9

    Voici comment je le fais:

    $.msg = function(text, style)
{
    style = style || 'notice';           //<== default style if it's not set

    //create message and show it
    $('<div>')
      .attr('class', style)
      .html(text)
      .fadeIn('fast')
      .insertBefore($('#page-content'))  //<== wherever you want it to show
      .animate({opacity: 1.0}, 3000)     //<== wait 3 sec before fading out
      .fadeOut('slow', function()
      {
        $(this).remove();
      });
};

    Exemples:

    $.msg('hello world');
$.msg('it worked','success');
$.msg('there was a problem','error');

    Comment il fonctionne

    1. crée un élément div
    2. définit le style (de sorte que vous pouvez changer le look)
    3. définit le code html pour afficher
    4. commence à la décoloration dans le message de sorte qu'il est visible
    5. insère le message où vous le souhaitez
    6. attend 3 secondes
    7. s'efface le message
    8. supprime le div du DOM -- pas de gâchis!

    Bonus Échantillon De Message Style:

    .notice, .success, .error {padding:0.8em;margin:0.77em 0.77em 0 0.77em;border-width:2px;border-style:solid;}
.notice {background-color:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background-color:#E6EFC2;color:#264409;border-color:#C6D880;}
.error {background-color:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

    ``

    c'est terriblement multifonctionnel
    travail de violon de celui-ci: jsfiddle.net/rug5R/1
    déplacé fadeIn avant d'insérer de sorte qu'il fonctionne jsfiddle.net/rug5R/2

    OriginalL'auteur daniellmb

  3. 1

    C'est un petit script qui parcourt les messages avec un intervalle de 3 secondes. C'est peut-être pas ce que vous avez besoin, mais j'espère que cela vous aide à vous pour obtenir ce que vous voulez.

    var messages = [
  "test message 0",
  "test message 1",
  "test message 2",
  "test message 3"
];

$(function() {
  var msgIndex = 0;
  setInterval(function() {
    $msgDiv = $("#message");
    $msgDiv.fadeOut(200, function() {
      $msgDiv.html(messages[msgIndex]).fadeIn(500);
      if(msgIndex >= messages.length)
        msgIndex = msgIndex % messages.length;
    });
  }, 3000);
});

    OriginalL'auteur Emre Erkan

  4. 0

    Prendre un coup d'oeil à jGrowl. Très joli et très configurable.

    Oui. Très agréable.

    OriginalL'auteur Chris Doggett