jQuery：slideDown jump

私は以下の機能を持っています。 jQuery：slideDown jump

function notificationBoxOutput(type, message) { 
    if (type == "success") { $('.notificationBox').removeClass('warning').addClass('success'); } 
    if (type == "warning") { $('.notificationBox').removeClass('success').addClass('warning'); } 
    $('.notificationBox').html('<b>' + type + ':</b>&nbsp;' + message); 
    $('.notificationBox').slideDown().delay(3000).slideUp(); 
}

と次のCSS機能は、トップからnotificationBoxべきslideDownを解雇されそう

div.notificationBox 
{ 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    position: fixed; 
    z-index: 3; 
    background: #333333; 
    text-align: center; 
    vertical-align: center; 
    opacity:0.85; 
    filter:alpha(opacity=85); 
    display: none; 
} 

div.warning { background-color: #990000; display: block; } 
div.success { background: #009900; display: block; }

は、そのメッセージと3secs slideUp再び後を示しています。

slideUpだけがアニメーションとして正常に動作しますが、slideDownがアニメーションなしでジャンプする理由は何ですか？

出典

2011-07-26 matt

これは話題にはなりませんが、***あなたが '$（ '。notificationBox'）'を実行するたびに、jQueryはDOMを上から下に検索しなければなりません。関数を繰り返し呼び出すのではなく、一度呼び出す*、結果を変数に格納して、それを使用する。 –

私の答えは – avall

...これであなたのjqueryの最後の行を交換してみてください。 successとwarningクラスのdisplay:block宣言を削除すれば正常に動作します。あなたは.successと.warningクラスからdisplay:blockを削除し、jqueryのはそれを処理させる一度はそのままで動作するはず

出典

2011-07-26 06:56:39 avall

は、問題があなたのCSSにある

$('.notificationBox').slideDown(function() { 
    $('.notificationBox').delay(3000).slideUp(); 
});

出典

2011-07-26 06:48:54 Tom

に編集されています。この場合でもまだジャンプしますが、まったくスライドバックしません。 – matt

は問題ではありません。 http://jsfiddle.net/NnY35/（編集：ちょうど受け入れられた答えを見た...それはなぜこの作品がありますか！） – Tom

例http://jsfiddle.net/gaby/Qznrk/3/
で（は、通知への参照を格納するためのコードを変更し、それを使用し、一緒にいくつかの方法をチェーン。）

出典

2011-07-26 07:07:32

私はあなたのコードを試してみました。私は、notificationBoxOutput関数を呼び出すために2つのボタンを追加しました。

<html><head> 
<script language="javascript" src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
function notificationBoxOutput(type, message) { 
    if (type == "success") { 
     $('.notificationBox').removeClass('warning').addClass('success'); } 
    if (type == "warning") { 
     $('.notificationBox').removeClass('success').addClass('warning'); } 
    $('.notificationBox').html('<b>' + type + ':</b>&nbsp;' + message); 
    $('.notificationBox').slideDown().delay(3000).slideUp(); 
} 
</script> 
<style> 
div.notificationBox 
{ 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    position: fixed; 
    z-index: 3; 
    background: #333333; 
    text-align: center; 
    vertical-align: center; 
    opacity:0.85; 
    filter:alpha(opacity=85); 
    display: none; 
} 

div.warning { background-color: #990000; display: block; } 
div.success { background: #009900; display: block; } 
</style> 
</head><body> 
    <div class="notificationBox">Hi</div> 
    <button onclick='notificationBoxOutput("success","success")' >success</button> 
    <button onclick='notificationBoxOutput("warning","warning")' >warning</button> 
</body></html>

ジャムの問題は、成功ボタンを最初にクリックしてから3000ミリ秒前に警告ボタンをクリックしたときにのみ発生することがわかりました。これはまた、警告ボタンを最初にクリックしてから3秒以内に成功ボタンをクリックすると起こります。 タイプでnotificationBoxOutputを（チェックする前にこのコードを追加し、この問題を解決するために

）

$('.notificationBox').hide();

もhttp://jqueryfordesigners.com/slidedown-animation-jump-revisited/をご覧ください。 JQueryにはバグがあります。このリンクはあなたを助けるかもしれません。

出典

2011-07-26 07:52:24

答えて

関連する問題