Javascript-форум - Доработать скрипт плавного исчезновение блока

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

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

- - Доработать скрипт плавного исчезновение блока (https://javascript.ru/forum/misc/61587-dorabotat-skript-plavnogo-ischeznovenie-bloka.html)

Доработать скрипт плавного исчезновение блока

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

Сам скрипт

<script>
$elements = $('.rotating-content').find('span');
$elements
   .not(':first-child')
   .addClass('visually-hidden')
   .css('opacity', 0);

setInterval(function() {
   $elements.filter(':not(.visually-hidden)').fadeTo('slow', 0, function() {
      $next = $(this).addClass('visually-hidden').next();
      if ($next.length === 0) {
         $next = $elements.first(); 
      }
      $next.removeClass('visually-hidden').fadeTo('slow', 1);
   });
}, 9000);</script>

Стили его

Код:

<style>

.rotating-content

{

height:215px;

}

.visually-hidden

{clip:rect(0 0 0 0);

height:1px;

margin:-1px;

overflow:hidden;

padding:0;

position:absolute;

width:1px

}</style>

Ну и само тело

Код:

<div class="rotating-content">



<span>БЛОК 1</span>

<span>БЛОК 2</span>

<span>БЛОК 3</span>



</div>

alex72bel,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .rotating-content
{
height:215px;
}
.rotating-content span
{
overflow:hidden;
padding:0;
position:absolute;
opacity: 0;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
   $(function(){

$elements = $('.rotating-content').find('span');
var $next = $elements.first();
function fn() {
   $next.fadeTo(1200,1).delay(9000).fadeTo(1200,0,fn);;
   $next = $next.next();
      if ($next.length === 0) {
         $next = $elements.first();
      }
}

fn()

   })
  </script>
</head>

<body>
<div class="rotating-content">

<span style="background-color:#FFFF00">БЛОК 1</span>
<span style="background-color:#FF00FF">БЛОК 2</span>
<span style="background-color:#D2691E">БЛОК 3</span>

</div>
</body>

</html>

Четко... Огромное спасибо ... Где не спрашивал постоянно пинали ...