9

Mac os の通知と同様に機能するコンテナーがあります。要素はキューに追加され、特定のタイムアウト後に削除されます。これはうまく機能しますが、視覚的に不快な副作用が 1 つあります。

それらが DOM から削除されると、スタック内の次の要素が前の要素によって作成された空白を埋めるため、UI がぎざぎざに更新されます。スタック内の下の要素が、理想的にはcss3を使用してそのスペースにスムーズに移動することを望みますがtransition: all 0.5s ease-in-out、クラスにaを追加して.noticeも、兄弟が削除されたときにオブジェクトに影響はありませんでした。

最小限の JS 解釈:

$('#add').click(function(e) {
    e.preventDefault();
    $('#container').append('<p class="notice">Notice #</p>');
});

$('body').on('click','p.notice', function(e) {
    $(this).fadeOut();
});

いっそのことここでフィドル：

http://jsfiddle.net/kMxqj/

私は MVC フレームワークを使用してこれらのオブジェクトをデータバインドしているため、Jq プラグインよりもネイティブの css / jQuery が優先されます。

4

5 に答える 5

17

これにより、クリックされた要素がフェードアウト効果で削除され、下のすべてがスムーズに移動します。これはnotice、スタック内の位置に関係なく、スタック内の任意の div に対して機能します。

試す：

$('body').on('click','p.notice', function(e) {
    $(this).fadeOut(500,function(){
        $(this).css({"visibility":"hidden",display:'block'}).slideUp();
    });
});

ここでフィドル

2018 年 8 月 7 日更新:

純粋な JS を使用して slideUp 機能を実行することについてユーザーの 1 人から尋ねられたので、requestAnimationFrameを使用して要素の高さをアニメーション化する簡単なデモをまとめました。フィドルはここにあります。

于 2013-03-12T16:34:16.067 に答える
1

jQuery の Animate() メソッドは、オブジェクトをフェード インおよびフェード アウトできるだけでなく、オブジェクトを移動することもできるため、学ぶのに最適なツールです。

CSS:

.notice {
    position:relative;
    top:20px;
    width: 100%;
    height: 50px;
    background-color: #ccc;
    opacity:0;
}

jQuery:

$('#add').click(function(e) {
    e.preventDefault();
    $('#container').append('<p class="notice">Notice #</p>');
    $('.notice').animate({opacity: 1, top:0}, 1000);
});

$('body').on('click','p.notice', function(e) {
    $(this).fadeOut();
});

そして私のjsFiddleデモ

于 2013-03-12T16:30:24.647 に答える
0

このフィドルはどうですか

CSS

.notice {
    width: 0;
    height: 0;
    background-color: #ccc;
}

JS

$('#add').click(function(e) {
    e.preventDefault();
    $('#container').append('<p class="notice">Notice #</p>');
    $('#container p.notice:last-child').animate({
        width: 100%,
        height: 50px
    });
});

$('body').on('click','p.notice', function(e) {
    $(this).fadeOut();
});

必要に応じて値を微調整しますが、このようなものはあなたが望むことを達成するはずです-それはanimate（）があなたが望むものかもしれないように聞こえます

于 2013-03-12T16:31:09.370 に答える
0

これを行う簡単な方法は、高さとマージンのプロパティをアニメーション化することです - http://jsfiddle.net/kMxqj/14/

$('#add').click(function(e) {
    e.preventDefault();
    $('#container').append('<p class="notice">Notice #</p>');
});

$('body').on('click','p.notice', function(e) {
    $(this).animate({'height':0,'margin':'0'});
    $(this).fadeOut();
});

これにより、高さと余白が 0 にアニメートされ、オブジェクトがフェード アウトするため、遷移がスムーズになります。また、通知ボックスにオーバーフローを非表示にして、アニメーションの発生時に内部のコンテンツが覆われるようにします。

于 2013-03-12T16:29:36.093 に答える