1

ここで警告メッセージのこのスクリプトを見つけました：http：//www.red-team-design.com/cool-notification-messages-with-css3-jquery

スクリプトでは、クリック機能の後に警告メッセージを非表示にするように設定されています

     $('.message').click(function(){              
              $(this).animate({top: -$(this).outerHeight()}, 500);
     });

そこで、xミリ秒後に閉じることを期待してタイムアウト関数を追加しましたが、ページが読み込まれるとすぐに、いわば「タイマー」が実行を開始します。

    setTimeout(function(){hideAllMessages()},5000);

フォームが送信されてドロップメッセージが表示されるたびにタイムアウト機能を機能させたい（フォームを送信するために非表示のiframeを使用しており、在庫があるため、同じページで繰り返し送信されます）。

ここにデモ を設定しましたjsfiddle

4

2 に答える 2

3

showMessage次のように関数に追加します。

function showMessage(type)
{
    $('.'+ type +'-trigger').click(function(){
          hideAllMessages();                  
          $('.'+type).animate({top:"0"}, 500);
          setTimeout(hideAllMessages,3000);     
    });
}

jsFiddleデモ

編集：コメントでJames Montagneが示唆しているclearTimeout()ように、ユーザーがすばやくクリックした場合に、在庫のタイムアウトを防ぐために使用できます。

このようなもの（簡単な例、本番環境に対応していない可能性があります）：

var timeout = null;
function showMessage(type)
{
    $('.'+ type +'-trigger').click(function(){
          hideAllMessages();                  
          $('.'+type).animate({top:"0"}, 500);
          if (timeout) clearTimeout(timeout);
          timeout = setTimeout(hideAllMessages,3000);     
    });
}

jsFiddleデモ

于 2012-06-05T19:17:28.547 に答える
0

アニメーションが完了した後、タイムアウトを設定してみてください。

 $('.message').click(function(){              
          $(this).animate({top: -$(this).outerHeight()}, 500, function(){
               setTimeout(function(){hideAllMessages()},5000);  
          });
 });
于 2012-06-05T19:17:05.203 に答える