0

少し奇妙なタイトルですが、ここで私が得たものです。

私はこの質問が数回尋ねられたことを発見しましたが、オーナーは私にとって適切に機能していないようです

私が得たのは、あなたの注意を引くために上下にバウンドするフッターです。それにカーソルを合わせると、フィルターが表示されて拡大します。

これでウィンドウ内で完全に機能しますが、他のタブに移動してサイトに戻ると、すべてのバウンスが次々に再生されます。

CPU速度を向上させるために、クロムが別のタブにあるときに間隔を遅くするという記事を読みました。

ウィンドウがフォーカスに設定されている場合にのみタイマーが再生され、ブラーに設定されている場合はタイマーが無効になります。しかし、これは100％の時間では機能しません。

var $bounceInter = 6000;

function mycode() {
    if($bounceOn == true) {
            $("#footer").animate({bottom:"+=20px"},150, 'swing').animate({bottom:"-=20px"},150, 'swing').animate({bottom:"+=10px"},100, 'swing').animate({bottom:"-=10px"},100,"swing",function(){$("#footer").data("bouncing", false);});
    }
    clearTimeout($bounceTimer);
  $bounceTimer = setTimeout(mycode, $bounceInter); // repeat myself
}


$(window).focus(function() {
    $bounceTimer = setTimeout(mycode, $bounceInter);
});

$(window).blur(function() {
    clearTimeout($bounceTimer);
});

var $bounceTimer = setTimeout(mycode, $bounceInter);

他に考えられる修正はありますか？

他の人からバウンスコードを受け取ったのですが、問題があるのでしょうか？

4

1 に答える 1

0

requestAnimationFrameメソッドをコードに組み込みます。あなたのコードは完全ではないので（の役割は$bounceOn何ですか？おそらくホバーまたは何かに設定されています）、関数名に基づいて一般的な手順を強調表示します。$慣例により、jQuery オブジェクトをマークするために使用されるため、プレフィックスを削除します。

requestAnimationFrame便宜上、必要に応じてネイティブ (接頭辞付き)メソッドとポリフィルを使用する API の正規化を使用しています。ポリフィルは Erik Moller によって作成され、彼のブログで見つけることができます。

// Minimum delay between each call
var bounceInter = 6000
  , raf
  , bounceTimer;

function nextAnimationStep() {
    raf = requestAnimationFrame(function() {
        // Code here (eg animation)
        bounceTimer = setTimeout(nextAnimationStep, bounceInter);
    });
}

// Initial step
nextAnimationStep();

// To cancel animation (to restart, just call `nextAnimationStep();` ):
cancelAnimationFrame(raf);
clearTimeout(bounceTimer);

ギャップが埋められたアニメーションは次のとおりです: http://jsfiddle.net/exPeP/1。

于 2012-09-06T08:53:43.597 に答える