0
var messageSpan;
function createFlashMessage = function(message, type, time) {
    messageSpan || (messageSpan = $("<span>").hide().appendTo("body"));
    messageSpan && (messageSpan.stop().removeClass().addClass("message-mask  label"));
    messageSpan.html(message).addClass("label-" + (type || "success"));
    var left = Math.abs($(document).width() / 2 - (messageSpan.width() + 30) / 2);
    messageSpan.css({
        left: left + 'px'
    }).fadeIn(200, function() {
        $(this).delay(time || 5000).fadeOut();
    });
};

それは機能しましたが、私が期待するものではありません。

この関数を初めて呼び出すのは正常ですが、実行中に呼び出すと、メッセージスパンが(新しいメッセージで)fadeOutになり、再びfadeInになります。

これは私が望んでいることではありません。実行中に呼び出された場合は、テキストを新しいメッセージに置き換えて、時間を再計算します(新しい5秒)。

それを修正する方法は?

これはjqueryアニメーションタイマーメカニズムに関連しているようですが、誰か私にお願いできますか?

4

2 に答える 2

1

.delay()キューをクリアするときにうまく再生されません。

.stop(true、true)

messageSpan.stop(true,true)の代わりに使用しmessageSpan.stop()ます。アニメーションをすぐに最後までジャンプし、キューに入れられたアニメーションをすべてクリアします。これは通常、ユーザーが気付かないほど速く発生します。

setTimeout&clearTimeout

これが最善の方法だと思います。

var messageSpan;
var createFlashMessage = function(message, type, time) {
  messageSpan || (messageSpan = $("<span>").hide().appendTo("body"));
  messageSpan && clearTimeout(messageSpan.data("timeout"));
  messageSpan && (messageSpan.stop(true,true).removeClass().addClass("message-mask  label"));
  messageSpan.html(message).addClass("label-" + (type || "success"));
  var left = Math.abs($(document).width() / 2 - (messageSpan.width() + 30) / 2);
  messageSpan.css({
    left: left + 'px'
  }).fadeIn(200, function() {
    messageSpan.data("timeout", setTimeout(function(){
      messageSpan.fadeOut();
    }, time || 5000));
  });
};
于 2012-06-18T06:49:08.440 に答える
-1

これを試して:

var messageSpan;
var AnimationRunning = false;

function createFlashMessage = function(message, type, time) {
    messageSpan || (messageSpan = $("<span>").hide().appendTo("body"));
    messageSpan && (messageSpan.stop().removeClass().addClass("message-mask  label"));
    messageSpan.html(message).addClass("label-" + (type || "success"));
    var left = Math.abs($(document).width() / 2 - (messageSpan.width() + 30) / 2);
    if (AnimationRunning)
    {
      messageSpan.html('I love Michael Jackson')
    } else {
      AnimationRunning = true
      messageSpan.css({
          left: left + 'px'
      }).fadeIn(200, function() {
          $(this).delay(time || 5000).fadeOut(200, function(){AnimationRunning = false});
      });
  }

};
于 2012-06-18T06:23:51.773 に答える