jQuery анимации сделать ipad hang

Question

, поэтому у меня есть сценарий, который я написал, чтобы брать N изображений в галерее и распространять их по div, вроде как аккордеон. сценарий отлично работает на рабочем столе и большинство мобильных устройств, но ipad почему-то очень злится на меня. примерно в 70% случаев анимация будет висеть и полностью прекратиться.

это два screengrabs от ipad. она не висит в том же месте каждый раз, когда

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

я был изначально не кэшировать мои селекторы и делаю петлю каждый(), чтобы получить через каждый div.galleryItem, и когда я переключился на кэшированные селекторы работает немного лучше ... но она до сих пор висит.

вот мой Javascript, что называется на старте:

function activateGallery() { 
    var n = $('.galleryItem').size(); //number of images in gallery 
    var o = Math.round(100/n); //percent to push each image to the left 
    var os = 0; //current amount of space on the left 
    var z = 1; //z-index 
    var d = 0; //duration of animation 

    $('#totalSlides').empty().html(pad(n)); 

    //clean up any open controls 
    $('.galleryItem.active > .imageInfoCondensed > .toggle').fadeOut(); 

    //deactivate active slide if we have one 
    $('.galleryItem.active').removeClass("active"); 

    //NEW ALIGN LOOP WITH CACHED SELECTORS 
    var galItems = new Array(); 
    var galImages = new Array(); 
    var eq; 

    //assign selectors - 1 indexed 
    for (i=1;i<=n;i++) { 
     eq = i - 1; 
     galItems[i] = $('.galleryItem:eq(' + eq + ')'); 
     galImages[i] = $('.galleryImage:eq(' + eq + ')'); 
    } 


    //loop again to spread images 
    for (i=1;i<=n;i++) { 
     galItems[i].animate({ 
      "marginLeft": os + "%" 
     },d).css("zIndex", z); 
     os = os + o; 
     z++; 
     d = d + 200; 
    } 

    //adjust margins to center pictures 
    $(".galleryImage").animate({ 
     "marginLeft": "-35%" 
    },500); 

    $('.imageInfoCondensed').delay(d).slideDown(400); 

    $('.galleryItem').removeClass("noBorder"); 
} 

, возможно, я не кэшировать селекторы правильно? Я в затруднении здесь, поэтому любое понимание было бы действительно полезно!

Answer 1

CSS3 would be faster for animations than jQuery. Safari очень эффективно управляет им и должен работать с дутьем.

Если вы хотите, чтобы он был совместим с другими браузерами, которые не поддерживают CSS3, вы можете попытаться использовать jquery-animate-enhanced или something similar.

Также попробуйте использовать 3D-преобразование CSS for a better performance. (Он будет использовать аппаратное ускорение) Вместо:

transform: translateZ(0); 

Использование:

transform: translate3d(0,0,0); 

Answer 2

Как отмечалось ранее ваш лучший подход использовать CSS3 анимации и переходов с аппаратным ускорением

-webkit-transform: translate3d(0,0,0); 
    -moz-transform: translate3d(0,0,0); 
    -ms-transform: translate3d(0,0,0); 
    -o-transform: translate3d(0,0,0); 
     transform: translate3d(0,0,0); 

Для любых анимаций, требующих использования javascript, я бы посмотрел на использование window.requestAnimationFrame, чтобы не убивать циклы процессора и время автономной работы на мобильных устройствах тиски.

// shim layer with setTimeout fallback 
window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      function(callback){ 
      window.setTimeout(callback, 1000/60); 
      }; 
})(); 


// usage: 
// instead of setInterval(render, 16) .... 

(function animloop(){ 
    requestAnimFrame(animloop); 
    render(); 
})(); 
// place the rAF *before* the render() to assure as close to 
// 60fps with the setTimeout fallback. 

Paul Irish имеет отличную запись об этом здесь и как отступить к браузерам, которые его не поддерживают.

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/