2

サイトでカウントダウンを行うスクリプトを作成しました。すべての締め切りクラスでループし、時計を変更します。

これがコードです

self.setInterval(function(){
$('.deadline_container').each(function(){
    days = parseInt($(this).children('.deadline_days').html(),10);
    time = $(this).children('.deadline_time').html().split(':');
    hours = parseInt(time[0],10);
    minutes = parseInt(time[1],10);
    seconds = parseInt(time[2],10);
    if(seconds > 0){
        seconds -= 1;
    } else if(minutes > 0){
        minutes -= 1;
        seconds = 59;
    } else if(hours > 0){
        hours -= 1;
        minutes = 59;
        seconds = 59;
    } else if(days > 0){
        days -= 1;
        hours = 23;
        minutes = 59;
        seconds = 59;
    }
    sec = (seconds < 10) ? '0' + seconds : seconds;
    min = (minutes < 10) ? '0' + minutes : minutes;
    hh = (hours < 10) ? '0' + hours : hours;
    $(this).children('.deadline_days').html(days);
    $(this).children('.deadline_time').html([hh,min,sec].join(':'));
});
}, 1000);

ホバリング時にdivにオーバーレイを表示するコードもいくつかあります

$('.someDivClass').live({
    mouseover: function() {
        $(this).children('.background').children('.overlay').stop().animate({opacity:"1"}, 300);
    },
    mouseout: function() {
         $(this).children('.background').children('.overlay').stop().animate({opacity:"0"}, 300);
    }
});

その 2 つのコードはうまく機能し、アニメーションに問題はありません。問題は、間隔が実行されていて、オーバーレイで div の 1 つをホバーすると、カウントダウンが 1 秒刻みになるまでオーバーレイ アニメーションがフリーズすることです。アニメーションがないように見えて、突然オーバーレイだけが表示されることがあります。見栄えがすることもありますが、すべてはdivにカーソルを合わせた瞬間に依存します。setInterval 関数は、独自のコードの実行を停止するまでアニメーション キューを停止すると思います。

jqueryなどにはスレッドがないと思います。

質問は次のとおりです。

¿クロック間隔に依存せずにオーバーレイ アニメーションをスムーズにするにはどうすればよいですか?

カウントダウンやオーバーレイ アニメーションを効率的に行う方法はありますか?

jquery 1.8.2 と jQuery UI 1.9.0 を使用しています

編集

以前は気づきませんでしたが、次のように不透明度も変更されています。

$('#top_bar, #top_bar_container').hover(
    function(event){
        $(this).stop().animate({backgroundColor:"rgba(0,0,0,0.5)"}, 300);
    },
    function(event){
        $(this).stop().animate({backgroundColor:"rgba(0,0,0,0.2)"}, 1000);
    }
);

そのアニメーションは何があってもスムーズに実行されます!
したがって、ライブ関数 (AJAX を使用してページにコンテンツを追加するときに必要) または背景アニメーションに対する不透明度アニメーション (CPU の観点からはより高価になる可能性があります) である可能性があります。

どんな助けでも感謝します、ありがとう。

編集
これが私のDOMです

<div class="someDivClass">
    <div class="background">
        <div class="overlay">
            <div class="deadline">
                <div>Time Left</div>
                <div class="deadline_container">
                    <div class="deadline_days">14</div>
                    <div class="deadline_time">23:20:51</div>
                    <div style="clear:both;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

私のページにはこのコンテナがたくさんあります。

4

1 に答える 1

0

私はこれを解決しました。
実際、これは jQuery animate や javascript setInterval() の問題ではなく、Google Chrome 自体の問題でした。

私はこれを試しました：

フィリップが言ったように、最初のコードを setTimeout() に変更しました

.live() を $(document).on('mouseover', '.someDivClass', function(){...}); に変更しました。

しかし、どれも問題を解決できなかったので、あちこちでテストして、自分のサイトの画像を最適化し、解決しました!

何が起こると思いますか:
.background クラスの画像を小さくすると、アニメーションのラグが消えたため、Chrome は大きな画像の上に不透明な背景を持つアニメーション化された div をレンダリングする際に問題があります。

最初に持っていたコードを Firefox 15.0.1 でテストしましたが、遅延はまったくありませんでした。

とにかく答えてくれてありがとう、もうアニメーションに問題はありません

于 2012-11-09T16:32:39.197 に答える