0

Нужно чтобы текст мерцал разными цветами. Но он в итоге просто синий. Не понимаю, пробовал уже по разному. Всё равно не выходит. setTimout должен запускать функцию с задержкой. В итоге текст просто синий. Как верно прописать это в коде? Спасибо!

$(document).on('ready', function (){
    var link = $('.flashing');
    function painting() {
            link.css("color", "yellow");
    };

    function painting2() {
            link.css("color", "red");
    };

    function painting3() {
            link.css("color", "blue");
    };
    setInterval(function(){
        painting();
        setTimeout(painting2(), 700);
        setTimeout(painting3(), 1400);
    }, 1000);
});
1
  • 1
    setTimeout первым параметром принимает функцию. У тебя же классическая ошибка: вызов функции вместо передачи
    – Grundy
    13 дек 2016 в 15:41

2 ответа 2

2

В Вашем коде

setTimeout(painting2(), 700);

эквивалентно

painting2();
setTimeout(undefined, 700);

Вот как надо (https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout):

var link = $("span");

function painting() {
  link.css("color", "yellow");
};

function painting2() {
  link.css("color", "red");
};

function painting3() {
  link.css("color", "blue");
};

setInterval(function(){
  painting();
  setTimeout(painting2, 700); // not painting2()
  setTimeout(painting3, 1400); // not painting3()
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Two roads diverged in yellow wood ...</span>

3
  • 1
    каждое второе срабатывание таймаутов будет совпадать
    – Grundy
    13 дек 2016 в 15:42
  • @Grundy я знаю, тем не менее, три цвета отчетливо видны
    – user176262
    13 дек 2016 в 15:43
  • 1
    стоит дописать пояснения в ответ, о том что было не так и почему
    – Grundy
    13 дек 2016 в 15:44
2

Я не знаю конкретно Вашу ситуацию, но правильнее сделать это с помощью css -

.сhristmas {
  animation: сhristmas 1s linear 0ms infinite;
}

@keyframes сhristmas {
  0% {
    color: red;
  }
  40% {
    color: green;
  }
  100% {
    color: blue;
  }
}
<span class="сhristmas">Happy New Year</span>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.