4

私のRailsアプリケーションにはフラッシュメッセージがあり、フラッシュメッセージがあるたびに上から下にスクロールし(すべてのコンテンツが下に移動)、数秒間留まり、スライドが元に戻るようにしたいと考えています。

jQueryでこれを行うにはどうすればよいですか?

高さを切り替えますか？

アップデート

メッセージが HTML に挿入される場合があります。これはslideDown、DOM が既に読み込まれているため、 が機能しないことを意味します。jQuery が and を検索して適用できるようにするにはどうすればよいです.messageか?slideDownslideUp

4

5 に答える 5

10

スライドさせて、数秒待ってから、次のようにスライドして戻すことができます。

$(selector for your message).slideDown(function() {
    setTimeout(function() {
        $(selector for your message).slideUp();
    }, 5000);
});

5000メッセージをミリ秒単位で表示したい時間に変更します。

display: none;そして、jQuery が入るまでメッセージが表示されないように、メッセージを CSS で設定することを忘れないでください。

于 2012-12-22T20:53:46.297 に答える
1

あなたのフラッシュメッセージは、クラスによって識別される（または識別される可能性がある）要素に含まれていると思います。最初のものを見つけて、スクロール位置をその要素の上部 (またはそこからのオフセット) に調整し、待ってからスクロールして上部に戻ります。

$(function() {
    var $flashMsg = $('.flash-message:first');
    if ($flashMsg.length) { // we've got one
       var top = $flashMsg.offset().top;
       $('html,body').animate({ scrollTop: top })
                     .delay(3000)
                     .animate({ scrollTop: 0 });
    }
});
于 2012-12-22T20:58:10.683 に答える
0

JQuery を使用し、タイマーと組み合わせてコールバックslideDown()を呼び出します。slideUp()

$("#message").slideDown(500, function(){
    setTimeout(function(){
$("#message").slideUp(500);  
},5000);
});
于 2012-12-22T20:56:29.803 に答える