2

上部に基本的な jquery 画像スライダーがある Web ページがあります。ブラウザ ウィンドウを最小化してから再度最大化すると、アニメーションの速度が 2 倍になるという問題が発生しています。これは chrome、ff、ie で確認されていますが、毎回ではありません。速度を上げる前に、サイズを複数回変更する必要がある場合があります。なぜそれがそれをするのか誰にも分かりますか？ここにページがあります - http://theatlasconsultingjobs.hiringhook.com/jobseeker/Search.aspx

そして、これがスライダーのjqueryです。

var fadeDuration=2000;
var slideDuration=4000;
var currentIndex=1;
var nextIndex=1;
$(document).ready(function()
{
    $('ul.slideshow li').css({opacity: 0.0});
    $("'ul.slideshow li:nth-child("+nextIndex+")'").addClass('show').animate({opacity: 1.0}, fadeDuration);
    var timer = setInterval('nextSlide()',slideDuration);
})
function nextSlide(){
        nextIndex =currentIndex+1;
        if(nextIndex > $('ul.slideshow li').length)
        {
            nextIndex =1;
        }
        $("'ul.slideshow li:nth-child("+nextIndex+")'").addClass('show').animate({opacity: 1.0}, fadeDuration);
        $("'ul.slideshow li:nth-child("+currentIndex+")'").animate({opacity: 0.0}, fadeDuration).removeClass('show');
        currentIndex = nextIndex;
}
4

3 に答える 3

2

これは、アニメーションと を使用する場合の問題setIntervalです。最新のブラウザでは、タブが非アクティブまたは最小化されるとアニメーションが停止します。これによりキューが作成され、タブが再びアクティブになると、ブラウザはそれらをすべて実行しようとします。

これを解決するclearTimeoutには、アニメーションが終了した後に使用してsetInterval、setTimeout

例

var timer;

$("'ul.slideshow li:nth-child("+nextIndex+")'")
    .addClass('show')
    .animate({opacity: 1.0}, fadeDuration, function(){
        timer = setTimeout(function() {
                nextSlide();
            }, slideDuration);            
});

function nextSlide(){
    nextIndex =currentIndex+1;
    if(nextIndex > $('ul.slideshow li').length)
    {
        nextIndex =1;
    }
    $("'ul.slideshow li:nth-child("+nextIndex+")'")
        .addClass('show')
        .animate({opacity: 1.0}, fadeDuration);

    $("'ul.slideshow li:nth-child("+currentIndex+")'")
        .animate({opacity: 0.0}, fadeDuration)
        .removeClass('show');

    currentIndex = nextIndex;

    clearTimeout(timer);
}
于 2013-07-16T15:44:59.393 に答える
0

animate コールバックで setTimeout を使用してみることができます 

var fadeDuration=2000;
var slideDuration=2000;//change this to work 2000 after animate ends
var currentIndex=1;
var nextIndex=1;
$(document).ready(function()
{
    $('ul.slideshow li').css({opacity: 0.0});
    $("'ul.slideshow li:nth-child("+nextIndex+")'").addClass('show').animate({opacity: 1.0}, fadeDuration);
    setTimeout('nextSlide()',slideDuration);
})
function nextSlide(){
    nextIndex =currentIndex+1;
    if(nextIndex > $('ul.slideshow li').length)
    {
        nextIndex =1;
    }
    $("'ul.slideshow li:nth-child("+nextIndex+")'").addClass('show').animate({opacity: 1.0}, fadeDuration);
    $("'ul.slideshow li:nth-child("+currentIndex+")'").animate({opacity: 0.0}, fadeDuration,function(){
        setTimeout('nextSlide()',slideDuration);//add setTimeout on callback
}).removeClass('show');
    currentIndex = nextIndex;
}
于 2013-07-16T15:52:32.133 に答える