4 
<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>

JQueryを使用して次のことを行うにはどうすればよいですか？

1. id = "message"を使用してメッセージをdivに挿入し、divを表示します。2.メッセージを3秒間表示します。3.div"message"の内容を削除します。4. divを非表示にし、必要に応じて手順1から開始します。

前もって感謝します。

4

4 に答える 4

9

これが私がそれをする方法です：

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

例：

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

使い方

  1. div要素を作成します
  2. スタイルを設定します（外観を変更できるように）
  3. 表示するHTMLを設定します
  4. メッセージがフェードインし始めるので、メッセージが表示されます
  5. 必要な場所にメッセージを挿入します
  6. 3秒待つ
  7. メッセージをフェードアウトします
  8. DOMからdivを削除します-混乱はありません！

ボーナスサンプルメッセージスタイリング：

.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;}

`` `

于 2009-08-03T16:58:05.187 に答える
6

あなたはこのようなことをすることができます：

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
于 2009-08-03T06:06:29.160 に答える
1

これは、3秒間隔でメッセージを循環する小さなスクリプトです。多分それはあなたが必要とするものではありませんが、私はそれがあなたが望むものを達成するためにあなたを助けることを願っています。

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);
});
于 2009-08-03T06:52:28.020 に答える
0

jGrowlを見てください。とても素敵で設定可能です。

于 2009-08-03T17:14:05.250 に答える