jQuery анимация ускоряется при изменении размера окна

У нас есть веб-страница с основным слайдером слайдов jQuery у вершины. Мы сталкиваемся с проблемой, когда окно браузера минимизируется, а затем автоматически увеличивается, а скорость анимации удваивается. Мы подтвердили это в chrome, ff и т. Д., Однако он не делает это каждый раз. Несколько раз мне приходится изменять размер несколько раз, прежде чем он ускорится. Кто-нибудь есть идеи, почему он это сделает? Вот страница - http://theatlasconsultingjobs.hiringhook.com/jobseeker/Search.aspx jQuery анимация ускоряется при изменении размера окна

И вот 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; 
}

источник

2013-07-16 geoff swartz

Я думаю, что вместо «ускорения» анимации очереди в то время как страница сведена к минимуму. Когда он затем максимизируется, анимации догоняют самих себя, поэтому играют один за другим. – George

Имеет ли это значение? Из того, что я могу сказать, меняются только фотографии, и текст (который является важной частью) остается читаемым и не изменяется. Я не думаю, что скорость сильно влияет на ваш слайдер. Вы можете использовать метод '.resize()', чтобы установить скорость обратно при изменении размера окна. Или также использовать его для отмены очереди событий. –

Это проблема при использовании animaitions и 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-16 15:44:59

Хотя код не работал, так как это дало мне то, что мне нужно, чтобы настроить мою и исправить. Благодаря! –

Opps, обновленный setTimeout. –

Вы можете использовать метод .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-16 15:31:44

вы можете попробовать использовать 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-16 15:52:32

jQuery анимация ускоряется при изменении размера окна

ответ

Смежные вопросы