Javascript-форум - Исчезающий текст, можно ли упростить скрипт?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Исчезающий текст, можно ли упростить скрипт? (https://javascript.ru/forum/misc/72313-ischezayushhijj-tekst-mozhno-li-uprostit-skript.html)

Исчезающий текст, можно ли упростить скрипт?

Собственно, имеется скрипт. Это вставляем в боди:

Код:

<body onload='fn();fz();'>

Это отображается:

Код:

<span id='saved'> что-то тут написано</span>

<span id='boom'> какой-то текст </span>

А это сам скрипт:

Код:

<script>



  var saved = document.getElementById('saved');

  var color = 0

  function fn(){

    saved.style.color = 'rgb('+255+','+color+','+color+')'

    color += 20

    if(color < 255) setTimeout(fn, 100)

    else {saved.style.color = 'rgb(255,255,255)';return;}

    

    }  

</script>





<script>



  var boom = document.getElementById('boom');

  var color = 0

  function fz(){

    boom.style.color = 'rgb('+255+','+color+','+color+')'

    color += 20

    if(color < 255) setTimeout(fz, 400)

    else {boom.style.color = 'rgb(255,255,255)';return;}

    

    }  

</script>

Если внимательно приглядеться, то их тут два, на самом то деле ))) Всё работает нормально. Так как надо. Но кажется мне, что это как-то... эммм.. по чайниковски что ли... что можно это сделать проще. Но как именно... вот этого я не понимаю. Попробовал покрутить getElementByClassName, но что-то у меня ничего толкового из этого не вышло. Суть в том, что скрипт либо читает только один span, заставляя исчезнуть, либо вообще никаких реакций.

Сама же задача заключается в том, что у меня таких спанов может быть... ну скажем двадцать. Присвоить им циклом через пхп уникальные цифровые идентификаторы не проблема, проблема в том, что этот скрипт не ловит цифры(это раз), а два - даже если он словит первый спан, то остальные останутся... не тронутыми.

То есть, мне либо для каждого нового текстового блока создавать новый script , либо доработать этот таким образом, чтобы он ловил все идентификаторы, которые надо убра.. ну, чтобы они исчезли(в данном случае побелели).

То есть, к примеру, есть у меня такое:

По длинной дороге идёт большой ослик и помахивает коротким хвостиком, отгоняя назойливых мух.

В данном случае "длинной, большой, коротким, назойливых" заключаются в спаны с идентификаторами id=01, id=02, id=03, id=04, а при запуске скрипта эти спаны глушатся. Соответственно, остаться в видимом спектре должно "По дороге идёт ослик и помахивает хвостиком, отгоняя мух."

Я не вдаюсь в подробности того, как именно это всё реализовывается и расставляется, но мне бы хотелось понять, можно ли как-то упростить работу скрипта, на который возложена конкретная задача. И.. если можно, то как именно.

Djavastik,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .test {
         color: #FF0000;
         transition: 2s;
    }
    .active .test{
      color: #FFFFFF;
    }

  </style>


</head>

<body onload='document.body.classList.add("active")'>

<span class="test"> что-то тут написано</span>
<span class="test"> какой-то текст </span>

</body>
</html>

- Здравствуйте, взвесьте пожалуйста килограмм масла
- О, вы знаете... у нас есть маргарин
- То есть... масла у вас нет?
- А чем вам не нравится наш маргарин?
- Дело в том, что у нас пятизвёздочный ресторан
- А у нас самый лучший маргарин на свете
- Хорошо, взвесьте пожалуйста килограмм маргарина

- Здравствуйте, что на бутерброде с икрой делает маргарин?
- О, вы знаете... у нас самые лучшие бутерброды!
- Но что на бутерброде за 1000 евро делает маргарин?
- Вам не понравилось?
- Дело в том, что нам бы хотелось отведать лучшего масла, с лучшей икрой в лучшем ресторане города
- Да, но вы сами продали нам маргарин

Рони, у вас замечательный пример с использованием css. Спасибо. Однако, мне интересна реализация на java.

Цитата:

Сообщение от Djavastik

Однако, мне интересна реализация на java.

тогда вы ошиблись форумом :)

Цитата:

Сообщение от Djavastik

Попробовал покрутить getElementByClassName

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .test {
         color: #FF0000;
         transition: 2s;
    }
    .active .test{
      color: #FFFFFF;
    }

  </style>
 <script>
window.addEventListener("DOMContentLoaded", function() {
  [].forEach.call(document.querySelectorAll(".test"), function(el) {
    var color = 0;
    void function fz() {
      el.style.color = "rgb(" + 255 + "," + color + "," + color + ")";
      color += 20;
      if (color < 255) {
        setTimeout(fz, 400);
      } else {
        el.style.color = "rgb(255,255,255)";
        return;
      }
    }();
  });
});
 </script>
</head>

<body >

<span class="test"> что-то тут написано</span>
<span class="test"> какой-то текст </span>

</body>
</html>

Djavastik,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .test {
         color: #FF0000;
         transition: .1s;
         display:block;
         font-size: 24px;
    }


  </style>
 <script>
window.addEventListener("DOMContentLoaded", function() {
  [].forEach.call(document.querySelectorAll(".test"), function(el,i) {
    var color = 0;
    function fz() {
      el.style.color = "rgb(" + 255 + "," + color + "," + color + ")";
      color += 20;
      if (color < 255) {
        setTimeout(fz, 100);
      } else {
        el.style.color = "rgb(255,255,255)";
        return;
      }
    };
    setTimeout(fz, 1200 * i);
  });
});
 </script>
</head>

<body >
<span class="test">- Здравствуйте, взвесьте пожалуйста килограмм масла</span>
<span class="test">- О, вы знаете... у нас есть маргарин</span>
<span class="test">- То есть... масла у вас нет?</span>
<span class="test">- А чем вам не нравится наш маргарин?</span>
<span class="test">- Дело в том, что у нас пятизвёздочный ресторан</span>
<span class="test">- А у нас самый лучший маргарин на свете</span>
<span class="test">- Хорошо, взвесьте пожалуйста килограмм маргарина</span>

<span class="test">- Здравствуйте, что на бутерброде с икрой делает маргарин?</span>
<span class="test">- О, вы знаете... у нас самые лучшие бутерброды!</span>
<span class="test">- Но что на бутерброде за 1000 евро делает маргарин?</span>
<span class="test">- Вам не понравилось?</span>
<span class="test">- Дело в том, что нам бы хотелось отведать лучшего масла, с лучшей икрой в лучшем ресторане города</span>
<span class="test">- Да, но вы сами продали нам маргарин</span>


</body>
</html>

Вариант

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .test {
         color: #FF0000;
         transition:all .4s 0 ease;
    }
    span { font-size:10pt; }
  </style>
 <script>
window.addEventListener("DOMContentLoaded", function() {
  [].forEach.call(document.querySelectorAll(".test"), function(el) {
    var opa = 1, fs = 10;
    void function fz() {
      el.style.opacity = opa;
      el.style.fontSize = fs + "pt";
      opa -= 0.1, fs -= 1;
      if (opa > 0) {
        setTimeout(fz, 400);
      } else {
        el.style.opacity = 0;
        el.style.fontSize = 0;
        return;
      }
    }();
  });
});
 </script>
</head>

<body >

<span>По</span>
<span class="test"> длинной</span>
<span> дороге идёт</span>
<span class="test"> большой</span>
<span> ослик и помахивает</span>
<span class="test"> коротким</span>
<span> хвостиком, отгоняя</span>
<span class="test"> назойливых</span>
<span> мух.</span> 
</body>
</html>

Не смог добиться плавного изменения размера:-E

Dilettante_Pro,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .test {
         color: #FF0000;
         transition:all .4s 0 ease;
    }
    span { font-size:10pt; }
  </style>
 <script>
window.addEventListener("DOMContentLoaded", function() {
  [].forEach.call(document.querySelectorAll(".test"), function(el) {
    var opa = 1, fs = 10;
    void function fz() {
      el.style.opacity = opa;
      el.style.fontSize = fs + "pt";
      opa -= 0.001, fs -= 0.01;
      if (opa > 0) {
        setTimeout(fz, 4);
      } else {
        el.style.opacity = 0;
        el.style.fontSize = 0;
        return;
      }
    }();
  });
});
 </script>
</head>

<body >

<span>По</span>
<span class="test"> длинной</span>
<span> дороге идёт</span>
<span class="test"> большой</span>
<span> ослик и помахивает</span>
<span class="test"> коротким</span>
<span> хвостиком, отгоняя</span>
<span class="test"> назойливых</span>
<span> мух.</span> 
</body>
</html>

j0hnik,
Такой вариант очевиден, я надеялся как-то при помощи transition сгладить шаги