2

jQuery animate を使用して、ページ上の複数の要素 (装飾要素) の位置を変更しています。bodyエリアから出たら要素を削除したい。(leftが より大きい場合、body widthまたはtopより大きい場合body height)。

私の場合、以下は使用できません。

  • 本体のオーバーフロー隠し
  • 要素を手動でアニメーション化します。jQuery animate を使用してシンプルに保ちたい (動的に要素を作成し、アニメーション化してから、それらを気にせず、追跡しないで、アニメーションが完了すると .remove() メソッドを使用します)

http://jsfiddle.net/a7Nck/

したがって、このJSfiddleでは、bodyスクロールバーが表示されないように、赤いdivが右端に到達すると消えます。

たとえば、div がビューポートにない場合は非表示になるように、CSS3 メディア クエリはありませんか?

編集：

解決策を考えただけです。アニメーションをトリガーする前に体の幅を取得し、体のサイズとアニメーションの動作の間の最小値を使用してアニメーションtop化leftします。問題は、これがアニメーションの速度に影響することです。

4

4 に答える 4

4

stepアニメイトの機能が使えます。

.animate() の 2 番目のバージョンは、ステップ オプション (アニメーションの各ステップで起動されるコールバック関数) を提供します。この関数は、カスタム アニメーション タイプを有効にしたり、発生中のアニメーションを変更したりするのに役立ちます。これは 2 つの引数 (now と fx) を受け入れ、アニメーション化される DOM 要素に設定されます。

var w = $(window).width()
$('div').animate({
    left: '20px'
}, 500).delay(1000).animate({
    left: '2000px'
}, {
    step: function(now, fx) {
        if (now > w) {
            $(fx.elem).remove()
        }
    }
}, 1000);

フィドル

于 2012-08-28T17:49:55.377 に答える
2

考えられる回避策の 1 つ (最初の制限がoverflow: hiddenCSS をグローバルに追加することであると仮定します):overflow: hiddenアニメーションの開始時に js を追加し、終了時に削除します。

$('body').css('overflow', 'hidden');
$('div').animate({left: '20px'},400).delay(1000).animate(
    {left: '2000px'},1000, false, function(){ 
    $(this).hide();
    $('body').css('overflow', 'auto');
});​

http://jsfiddle.net/a7Nck/3/

于 2012-08-28T17:50:28.227 に答える
0

div が表示領域から出るとすぐに、スクロールバーが表示されます。スクロールバーが表示されないようにしたい場合は、div が画面から出ることを許可できません。これが私の解決策です：

$('div')
    .animate({left: '20px'},400)
    .delay(1000)
    .animate(
        {left: ($(window).width()-$('div').width()) + "px"},
        1000,
        null, // default easing
        function() { $('div').hide() }
    );

Jsfiddle: http://jsfiddle.net/j4rdA/1/

</p>

于 2012-08-28T17:49:56.117 に答える
0

最後のアニメーションが完了したときにdivを非表示にするだけです。

$('div').animate({left: '20px'},400).delay(1000).animate({left: '2000px'},1000, function(){ $(this).hide(); });

デモを見る

于 2012-08-28T17:45:17.697 に答える