JS анимация (баг)

Здравствуйте! Есть скрипт, который рандомно выбирает из заданых мною координат положение картинки и анимирует её (показывает/прячет картинику из-за края экрана). Но существует проблема - если какое-то время побыть на любой другой вкладке - анимация начинает не правильно работать (картинка либо начинает появляться по центру экрана, либо вообще начинает летать по всему экрану). Пожалуйста, подскажите как можно решить эту проблему, пример скрипта и html ниже:

<img src="images/man.png" class="man-frames"/>

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
var $frame = $('.man-frames'),
    frames = [
        {default: {top: 30, left: -150}, animate: {left: 0}},
        {default: {top: '50%', left: -150}, animate: {left: 0}},
        {default: {left: -150, bottom: 10}, animate: {left: 0}},
        {default: {top: -150, right: 0, left: 'auto', transform: 'rotate(90deg)'}, animate: {top: 0}},
        {default: {bottom: 0, right: -150, left: 'auto', transform: 'rotate(-180deg)'}, animate: {right: 0}},
        {default: {bottom: '50%', right: -150, left: 'auto', transform: 'rotate(-180deg)'}, animate: {right: 0}},
        {default: {left: '50%', top: -150, transform: 'rotate(90deg)'}, animate: {top: 0}},
        {default: {left: '20%', bottom: -150, transform: 'rotate(-90deg)'}, animate: {bottom: 0}},
        {default: {left: '60%', bottom: -150, transform: 'rotate(-90deg)'}, animate: {bottom: 0}}
    ];
setInterval(function () {
    var frame = frames[getRandomInt(0, frames.length - 1)];
    $frame
        .removeAttr('style')
        .css(frame.default)
        .animate(frame.animate, 200, function () {
            setTimeout(function() {
                $frame.animate(frame.default);
            }, 1000);
        });
}, 8000);

Возможно можно показывать этот скрипт только в тот момент, когда вкладка активна, а если не активна - скрипт отключать. Буду рад любой помощи!