Javascript 切换选项卡使CSS变得疯狂

有人能解释为什么当你访问页面时3D可以正常工作，但当你切换到另一个选项卡，然后恢复到页面时3D会崩溃吗

但是

。。。它消失在屏幕上

HTML:

脚本：

var getImage = function(){
    var images = ["img1.jpg", "img2.jpg", "img3.jpg"];


    $.each(images, function( index, value ) {
        $('<img />').attr('src', value);
    });

    index = 0;

    return function(){
        if (++index == images.length){
            index = 0;
        }

        return images[index];
    };
}();

setInterval(function(){
    transform($('#img'), getImage());
}, 1000);

function transform(img, newImg){

    img
        .wrap('<div id="container"><div id="cube"></div>')
        .css('-webkit-transform', 'translateZ(425px)');

    img
        .clone()
        .attr('id', 's1')
        .insertBefore(img)
        .css('background-image', 'url("' + newImg + '")')
        .css('position', 'absolute')
        .css('-webkit-transform', 'rotateY(-90deg) translateZ(425px)');

    PrefixedEvent($('#cube')[0], "AnimationEnd", function () {
        img.unwrap().unwrap();
        img.remove();
        $('#s1')
            .attr('id', 'img')
            .css('-webkit-transform', '');
    });

    $('#cube').addClass('enable');
}


function PrefixedEvent(element, type, callback) {
var pfx = ["webkit", "moz", "MS", "o", ""];
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p]+type, callback, false);
    }
}

var getImage=function（）{
var images=[“img1.jpg”、“img2.jpg”、“img3.jpg”]；
$.each（图像、函数（索引、值）{
$('')
.css（'-webkit transform'，'translateZ（425px）'）；
img
.clone（）
.attr（'id'，'s1'）
.insertBefore（img）
.css（'background-image'，'url（'+newImg+'））
.css（'位置'，'绝对'）
.css（'-webkit transform'，'rotateY（-90度）translateZ（425px'）；
PrefixedEvent（$（'#cube'）[0]，“AnimationEnd”，函数（）{
img.unwrap（）.unwrap（）；
img.remove（）；
$（'#s1'）
.attr（'id'，'img'））
.css（'-webkit transform'，''）；
});
$（'#cube'）.addClass（'enable'）；
}
函数PrefixedEvent（元素、类型、回调）{
var pfx=[“webkit”、“moz”、“MS”、“o”和“”]；
对于（var p=0；p

我认为这是因为如果切换选项卡，则不会触发

动画结束事件，因此不会进行清理。
只有在窗口具有焦点时，才可以通过调用
转换来解决此问题：

(function() {
  var inTab= false;
  $(window).blur(function() {
    inTab= false;
  });
  $(window).focus(function() {
    inTab= true;
  });
  setInterval(function() {
    if(inTab) {
      transform($('#img'), getImage());
    }
  }, 1000);
})();


单击图像以模拟正在聚焦的窗口。然后您可以在选项卡之间切换，动画将不再中断。
但为什么它能够在窗口未聚焦但无法处理AnimationEnd事件时调用transform？这是一个非常好的问题。当选项卡处于非活动状态时，计时器间隔可能会被缓冲，但t animationend不是，导致所有内容都不同步。我会做更多的研究。但这并不能完全解决问题。例如，在iphone上，似乎不可能聚焦元素从而启动动画。我将小提琴的
inTab
初始化为false，但你应该在你的网站上将其初始化为true。
var getImage = function(){
    var images = ["img1.jpg", "img2.jpg", "img3.jpg"];


    $.each(images, function( index, value ) {
        $('<img />').attr('src', value);
    });

    index = 0;

    return function(){
        if (++index == images.length){
            index = 0;
        }

        return images[index];
    };
}();

setInterval(function(){
    transform($('#img'), getImage());
}, 1000);

function transform(img, newImg){

    img
        .wrap('<div id="container"><div id="cube"></div>')
        .css('-webkit-transform', 'translateZ(425px)');

    img
        .clone()
        .attr('id', 's1')
        .insertBefore(img)
        .css('background-image', 'url("' + newImg + '")')
        .css('position', 'absolute')
        .css('-webkit-transform', 'rotateY(-90deg) translateZ(425px)');

    PrefixedEvent($('#cube')[0], "AnimationEnd", function () {
        img.unwrap().unwrap();
        img.remove();
        $('#s1')
            .attr('id', 'img')
            .css('-webkit-transform', '');
    });

    $('#cube').addClass('enable');
}


function PrefixedEvent(element, type, callback) {
var pfx = ["webkit", "moz", "MS", "o", ""];
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p]+type, callback, false);
    }
}

(function() {
  var inTab= false;
  $(window).blur(function() {
    inTab= false;
  });
  $(window).focus(function() {
    inTab= true;
  });
  setInterval(function() {
    if(inTab) {
      transform($('#img'), getImage());
    }
  }, 1000);
})();