jQuery: змінюйте колір тексту за часовим інтервалом

Я сподівався, що хтось може допомогти мені з питанням jQuery. У мене є сайт, де я хочу, щоб тексти блоків змінювали колір протягом певних часових інтервалів, коли сторінка завантажується. Як приклад, у наступному коді;

<div id="fade">


<div class="fade1">text block 1</div>
<div class="fade2">text block 2</div>
<div class="fade3">text block 3</div>

</div>

Я хотів би .fade1 змінити з кольору: # 000, font-weight: normal; до кольору: # F00, шрифт-вага: напівжирний на п'ять секунд, потім повернутися до нормального; а потім - .fade2, а потім - .fade3 і т. д. Я хочу, щоб ці ефекти відбувались при завантаженні сторінки, а не спрацьовує клацанням миші або курсором миші.

Я досить новий для цього типу програмування і намагався розібратися з методами jQuery.Color() та .animate (), але я не можу досягти потрібного ефекту. Будь-яка допомога дуже оцінена - дякую.

** Це код, який я використовував з моменту написання цієї публікації:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<div id="fade1">Text Block 1</div>
<div id="fade2">Text Block 2</div>
<div id="fade3">Text Block 3</div>


<script type="text/javascript">
var index = 0;
setInterval(highlightText, 3000);

function highlightText() {
      index = (index % 3) + 1;
      $('#fade' + index).css('color', '#e7008a').css('font-size', '110%');
      setTimeout(function() {
             $('#fade' + index).css('color', '#000').css('font-size', '100%');
      }, 2900);
}
</script>
1
Я, мабуть, просто використовую звичайний JavaScript setTimeout .
додано Автор Dave Newton, джерело
Що конкретно ви зіткнулися з проблемами? Повна вибірка javascript/css/html допоможе нам швидше отримати кращу відповідь.
додано Автор hafichuk, джерело
Дякую за оперативні відповіді. Я спробую метод setTimeout. Оскільки я не міг одержати будь-які мої попередні спроби отримати бажані результати, я не зберігав їх, тому у мене немає відповідних зразків для їх виробництва.
додано Автор Laura690, джерело

1 Відповіді

Використовуйте готову функцію вашого документа, ви можете дізнатись більше про те, що тут .

Використовуйте функцію setTimeout всередині готової функції. Ви можете дізнатись більше про це тут .

0
додано
Я додав кілька кодів до мого оригінального повідомлення, який включає функцію setTimeout. Здається, це працює, але я помітив, що іноді щось стає не так, і один з блоків тексту не повертається до нормального, перш ніж зміниться наступний. Чи може хтось пролити будь-яке світло на шляху, який може бути?
додано Автор Laura690, джерело
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram