Question

我们有一个网页，顶部附近有一个基本的jquery图像滑块。我们遇到的问题是，当浏览器窗口最小化然后再次最大化时，动画速度加倍。我们已经在chrome，ff中证实了这一点，但是，它不是每次都这样做。有时我需要在加速之前多次调整大小。有谁知道为什么会这样做？这是页面 - 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;
}

Answer 1

使用动画和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); }

Answer 2

重要吗？据我所知，只有图片发生变化，文字（这是重要部分）仍然可读，不会改变。我不认为速度会影响你的滑块。

您可以使用.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();
});

Answer 3

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

jquery动画加速窗口调整大小

3 个答案: