Jquery скорость анимации на Firefox

Question

У меня есть слайд-шоу, которое делает 10 слайсов для каждого изображения и анимирует эти фрагменты.Т.е., Opera, Chrome хорошо запускают анимацию, но в Firefox анимация слишком медленная, я пробовал на разных компьютерах и все так же.Я создаю срезы с циклом «for», который создает 10 новых div, и каждый div имеет свое свойство background background.Как я могу решить это для Firefox?спасибо.

я добавил несколько кодов

//part of creating slices

for(imageN=0;imageN<imageCount;imageN++)
{
$('#image').append("<div name=slices class=slices></div>");
slicesCreate(imageN);
}

//#image is main div contains slice divs.

//Here is sliceCreate function
/*In this function, it takes how many images added to slideshow, takes all 
sources for each image and creates slices*/
function slicesCreate(imageN)
{
var i = 0;
var nleft = 0;
var image= $("#image img:eq("+imageN+")").attr("src");

    for(i=0;i<10;i++)

       {

     $('.slices:eq('+imageN+')').append("<div name=slice"+i+" class=slice></div>");
 $(".slices:eq("+imageN+") .slice[name=slice"+i+"]").css({
  backgroundImage: "url("+image+")",
  backgroundPosition:  nleft + "px 0px",
  backgroundRepeat: "no-repeat",
  backgroundSize: twidth
     });  

    /*sliceCount is a global variable that calculated when page loaded for display
    resolution*/
    nleft -=sliceCount;

         }

   }


/* And here is one of the animation code, this code runs for every slice */
function animateSlices(current,next,slice,animid,delay)
{

 setTimeout(function() {

$(".slices:eq("+next+") .slice[name=slice"+slice+"]").css({
       display: "block",
           marginTop: "-700px"
});  


$(".slices:eq("+next+") .slice[name=slice"+slice+"]").animate({
marginTop: "0px"

},1000);


   $(".slices:eq("+current+") .slice[name=slice"+slice+"]").animate({
marginTop: "700px"      
},1000);



    }, delay);


}

и функцию, которая вызывается при нажатии кнопки анимации

function anim()
 {
  if(!animating)
    {
      animating = true;

       var j = 0;
       var delay = 0;
       current = $('.slices:visible').index('.slices');
       var siz = $('.slices').size();
       var cSize = $('.slices:visible').size();
       var txen = 2;
       var rand = parseInt(Math.random()*3);
       var last = $('.slices:last').index('.slices');
       if(cSize>1)
       return;

    //this part is calculating id of next image
     if(siz > 1 && current!= last)
      {
        txen = current + 1;
      }
     else if(siz == 1)
      {
        txen = current;
      }
       else if(siz > 1 && current== last)
      {
       txen = 0;
      }

   //this part is makin next image slices visible and changes z-index for animation
$(".slices:eq("+txen+")").css({
        display: "block",
        zIndex: "92"
}); 

$(".slices:eq("+current+")").css({
         zIndex: "91"
});         

//this part calls animateSlices function for every next image slices 
   for(j=0;j<10;j++)
     {

   $(".slices:eq("+txen+") .slice[name=slice"+j+"]").css({
        marginTop: "0px"
    }); 

         animateSlices(current,txen,j,rand,delay);
    /*current = this image, txen = next image, j = slice number, rand = animation id,  
    delay = delay for animation */
if(rand==0)
delay += 150;
else
delay += 50;

}

}
else
return;

}

Редактировать: я изменил "marginTop«наверх» в анимации и абсолютное положение для каждого среза, пока проблема решена, она больше не отстает.У меня могли быть некоторые ошибки при размещении div с кодами jquery или изменении большого количества полей одновременно, что может быть причиной некоторого лага, но, как я сказал, это происходило только в Firefox, а не в Opera или Chrome.Не знаю, что вызвало эту проблему, но когда я решу это, я напишу свое решение здесь.А пока я поменяю верхнее значение в поле marginTop.Спасибо всем за ответы.

Answer 1

После просмотра вашего кода я бы сказал, что основная причина задержки анимации заключается в том, что ваши фрагменты добавляются как отдельные элементы dom, и анимация вынуждена не только перемещать их, но и работать с неспецифическими селекторами ...

Поправьте меня, если я ошибаюсь, но похоже, что вы в основном выдвигаете последние наверх и перемещаете их в течение 1 секунды. Если это так, то в любой момент у вас будет только 2 кадра за раз, верно?

Я бы создал объект javascript и использовал бы его, чтобы заполнить 2 определенных элемента dom для манипуляции.

<div id="current"></div>
<div id="next"></div>

Затем управляйте CSS этих элементов посредством обратного вызова анимации и соответствующего индекса вашего объекта js. Этот пример может не отражать ваши потребности, но основной принцип тот же:

var slices = {
    current: 0,
    image_arr: new Array(),
    animating: false,
    queue: null,
    delay: 150,
    init: function(){
         // obviously declare these variables and access them relevantly
         for(imageN=0;imageN<imageCount;imageN++)
         {
            this.image_arr.push($("#image img:eq("+imageN+")").attr("src"));
         }
    },
    animate: function(){
        if(!animating)
        {
            this.animating = true;
            // cycle through your image_arr instead of crawling the dom each iteration
            // set jquery animations as expected then re-call function if needed

            $('#current').css('background-image', this.image_arr[current]).delay(50).animate({marginTop: '700px'}, 1000, function(){
                 this.current += 1; // assuming you're using an int to call the index value of image_arr
            });

            $('#next').css({backgroundImage: this.image_arr[current], marginTop: '-700px').delay(50).animate({marginTop: '0px'}, 1000);

            this.queue = setTimeout(function(){
                this.animate();
            }, this.delay);
            //this should obviously be more considerate, but the idea is to recursively call animate until you're through animating
        }
    }
};

$(document).ready(function(){
    slices.init();
});

Этот пример совсем не стабилен или не протестирован и, очевидно, не будет работать, если вы копируете / вставляете, но общая идея состоит в том, чтобы вставить элементы слайса в массив или объект. Вы, конечно, можете также вставить объект для каждого среза в массив. Все, что соответствует вашим потребностям.

Но таким образом вам не нужно пересекать весь дом на каждом кадре.

Я могу ответить более конкретно, если вы скажете - опубликуйте ссылку на вашу настоящую анимацию. Поскольку я не вижу этого в действии, я просто догадался, на что я смотрю, и, возможно, я понял это совершенно неправильно.

Answer 2

.animate метод требует энергии процессора, если вы вообще не проявляете осторожность, как это уже делали некоторые другие пользователи.

JQuery - лаги во время анимации

jquery animate run laggy

Итак, проверьте, помогают ли они в построении предложений внутри вашей функции оптимальным образом.