閉じるリンクを持つSlideDown Div

Question

グリント、

"プロファイルが更新されました"のようなメッセージを表示するにはスライド式のDIVを使用します。

これは私のコードです。 DIVは、数秒（遅延）の後にページと異音を読み込むと滑り落ちます。しかし、リンクでタイムアウトする前にDIVを閉じることができるようにしたいのですが、SlideUpをアタッチすることはできません...なぜですか？

$("#message").hide(); 

    $("#message").slideToggle('slow', function() { 
     $(this).delay(2000).slideToggle("slow"); 
    }); 

    $("#close").click(function() { 
     $("#message").slideUp(); 
    }); 
    }); 

    <div id="message" style="display:none; border: 3px solid #ccc; width: 500px; height: 30px; background: #eee;"> 
    A message goes here! <a id="close" href="#" style="float: right;">Close div</a> 
    </div> 

Answer 1

閉じるdivイベントに.stop()を追加してみてください。アニメーションはjQueryのにキューイングされているためです

$("#close").click(function() { 
    $("#message").stop().slideUp(); 
}); 

jsfiddle例

Answer 2

。 slideUpエフェクトは、遅延されたslideToggleエフェクトが完了した後にのみ実行され、<div>エレメントはそれまでに隠されます。

あなたは@マークが示すように、遅延をキャンセルするstop()を呼び出す必要がありますが、その最初の引数でtrueを渡したいかもしれません：

$("#close").click(function() { 
    $("#message").stop(true).slideUp("slow"); 
}); 

その方法は、すべての効果が<div>要素にキューに入れられました現在実行中のものだけでなく、クリアされます。