Функция паузы с опрокидыванием

Question

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

$(document).ready(function(e) {
function nextMsg(i) {
    if (messages.length == i) {
        i = 0;
    }
    $('#message').html(messages[i]).fadeIn(500).delay(5000).fadeOut(500, function() {
        nextMsg(i + 1);
    });
};

var messages = [
    "Hello! <img src='../images/employees/01.png' />",
    "This is a website!<img src='../images/employees/02.png' />",
    "You are now going to be redirected.<img src='../images/employees/03.png' />",
    "Are you ready?<img src='../images/employees/04.png' />",
    "You're now being redirected...<img src='../images/employees/05.png' />"
    ];

$('#message').hide();

nextMsg(0);

});

Answer 1

Я бы сделал это примерно так. Не проверено, извините.. но, надеюсь, имеет смысл.

    var index = 0, hovered = false,
    messages = [
        "Hello! <img src='../images/employees/01.png' />",
        "This is a website!<img src='../images/employees/02.png' />",
        "You are now going to be redirected.<img src='../images/employees/03.png' />",
        "Are you ready?<img src='../images/employees/04.png' />",
        "You're now being redirected...<img src='../images/employees/05.png' />"
        ];

    $(function () {
      $(document).on('mouseenter', '#message', function () {
        hovered = true;
      })
      .on('mouseleave', '#message', function () {
        hovered = false;
      });
      window.setInterval(function () {
        if (!hovered) {
          $('#message').fadeOut(500, function () {
            $('#message').html(messages[index]).fadeIn(500);
            index = index === messages.length ? 0 : index + 1;
          });
        }
      }, 5000);

    });

Answer 2

Вы ищете что-то вроде

$(document).ready(function(e) {
    var msg = 0, hoverState = false, timeout;

    function scheduleNext() {
        timeout = setTimeout(function(){
            $('#message').fadeOut(500, function() {
                nextMsg();
            });
        }, 5000);
    }

    function nextMsg() {
        if (messages.length == msg) {
            msg = 0;
        }
        $('#message').html(messages[msg++]).fadeIn(500);
        scheduleNext();
    };

    var messages = [
        "Hello! <img src='../images/employees/01.png' />",
        "This is a website!<img src='../images/employees/02.png' />",
        "You are now going to be redirected.<img src='../images/employees/03.png' />",
        "Are you ready?<img src='../images/employees/04.png' />",
        "You're now being redirected...<img src='../images/employees/05.png' />"
    ];

    $('#message').hide().hover(function(){
        if(timeout) {
            clearTimeout(timeout);
        }
    }, function(){
        scheduleNext();
    });

    nextMsg();

});

Демо: скрипка