4

私はjqueryでアニメーション化されたテキスト効果を持っています。これはchromeで正常に機能しますが、ユーザーがタブを切り替えるとFirefoxで壊れます。タブを切り替えてアニメーションを10〜15秒間実行した後、戻ると、アニメーションが一度に複数の行を実行しようとしていることがわかります。

条件付き$(window).blur()と関数を使ってみ$(window).focus()ましたclearIntervalが、まったく運がありませんでした。

こちらがサイトへのリンクです

問題のjqueryは次のとおりです。

 $(document).ready(function(){
$('.container .flying-text').css({opacity:0});
$('.container .active-text').animate({opacity:1, marginLeft: "350px"}, 4000);
var int = setInterval(changeText, 5000);    

 function changeText(){
var $activeText = $(".container .active-text"); 

var $nextText = $activeText.next(); 
if($activeText.next().length == 0) $nextText = $('.container .flying-text:first');

$activeText.animate({opacity:0}, 200);
$activeText.animate({marginLeft: "-100px"});

$nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginLeft: "350px"}, 4000, function(){

    $activeText.removeClass('active-text'); 
    });
  }

 });

html：

<div class="container">
    <h3 id="fly1" class="flying-text active-text">Creative Solutions</h3>
    <h3 id="fly2" class="flying-text">Graphics</h3>
    <h3 id="fly3" class="flying-text">Sourcing</h3>
    <h3 id="fly4" class="flying-text">Distribution</h3>
    <h3 id="fly5" class="flying-text">Online Tools</h3>
    <h3 id="fly6" class="flying-text">Custom Branding</h3>
    <h3 id="fly7" class="flying-text">Personalized Support</h3>
</div>

およびcss：

.flying-text{
  margin-left:-100px;
  font-size:60px;
  text-align:center;
  font-style:bold;
}

可能な修正に関するアイデアはありますか？ブラウザが非アクティブなタブでアニメーションをより遅い速度でレンダリングすることは知っていますが、アニメーションをターゲットにして、切り替えられたタブでアニメーションを停止/再開することができないようです。前もって感謝します。

4

1 に答える 1

4

ウィンドウが表示されていない場合（フォーカスは必要ありません）、jQueryは実行しないように意図していると思います.window.requestAnimationFrame
を使用して実行し ます。アニメーションが表示されないとパフォーマンスが低下するためです。アニメーションの値はバックグラウンドで計算されると思いますが、要素の実際のレンダリングではありません。

アニメーションの問題は次のとおりです。間隔を介して変更テキストを呼び出します。間隔はアニメーションとは無関係です。jqueryアニメーションを停止/一時停止すると、ウィンドウがぼやけるため、タイムアウトは停止しません。

するべきこと。
テキストを変更する関数 nextText と、アニメーションを開始する関数 startAnimation を作成します。そして、アニメーションを停止する関数 stopAnimation 。
間隔を使用しないでください。
Onblur stopAnimation を呼び出してアニメーションを停止します
Onfocus startAnimation を呼び出してアニメーションを開始します
ロード後、startAnimation を 1 回呼び出します
アニメーションが終了したら、関数 nextText を
呼び出します nextText は startAnimation を呼び出します

于 2012-08-03T16:18:23.590 に答える