は、クロムのタブがバックグラウンドのときには起動しません。

Question

$("#element").addClass("myclass").on('webkitAnimationEnd oanimationend msAnimationEnd animationend', 
function (e) { 
    $("#element").addClass('text-success'); 
    $("#element2").addClass('myclass2'); 

    setTimeout(function() { 
    $("#element").fadeOut("slow", function() { 
     $("#element").remove(); 
    }); 
    }, 60000); 
}); 

これは、タブがアクティブなときに正しく動作します。タブが非アクティブの場合、コードはonイベントで停止します。

タブが非アクティブな場合、タブに切り替えると、どのように動作しますか？

Answer 1

タブのフォーカスが外れている間にアニメーションが終了したかどうかを知る方法はわかりませんが、アニメーションの所要時間を知っていれば、何らかの安全な期間すでに発射されていない場合は時間の例：

var hasRun = false; 

$("#element").addClass("myclass").on('webkitAnimationEnd oanimationend msAnimationEnd animationend', 
function() { 
    runIt(); 
}); 

setTimeout(function() { 
    runIt(); 
}, 10000); // Some period of time 

function runIt() { 
    if(!hasRun) { 
    $("#element").addClass('text-success'); 
    $("#element2").addClass('myclass2'); 

    setTimeout(function() { 
     $("#element").fadeOut("slow", function() { 
     $("#element").remove(); 
     }); 
    }, 60000); 

    hasRun = true; 
    } 
}); 

Answer 2

あなたのコードは、タブがアクティブでないときにブラウザがCSSのアニメーションを一時停止するため、タブがアクティブなときにのみ実行されます。 ではなく cssのアニメーションを行うことをお勧めします。はです。このタブがアクティブでない場合は実行を続行してください。

ブラウザが非アクティブなタブをどのように管理するかによって異なります。