2

我们有一个网页，顶部附近有一个基本的 jquery 图像滑块。我们遇到了一个问题，当浏览器窗口最小化然后再次最大化时，动画速度会翻倍。我们已经在 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 回答
1

有关系吗？据我所知，只有图片发生了变化，而文本（这是重要的部分）仍然可读且没有变化。我认为速度对您的滑块影响不大。

您可以使用一种.resize()方法在调整窗口大小时设置速度。或者也用它来取消事件队列

var $window = $(window); //If you use a selection more than once, you should cache it.

$window.resize(function() {
    //Check if there has been a call already
    //If the check is true that means the code was already called
    //So we cancel any previous calls, this way the code is only called once
    if(this.resizeTO) clearTimeout(this.resizeTO);

    this.resizeTO = setTimeout(function() {
        $(this).trigger('lastResize'); //Call the actual code with a 500ms delay
    }, 500);
});

$window.on('lastResize', function() {
//This is a custom event that is triggered in the timeout
//This will only run on the last time the resize method was called
    $("ul.slideshow li").clearQueue();
});
于 2013-07-16T15:31:44.943 回答
0

您可以尝试在动画回调上使用 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 回答