Форум

alex72bel · #1 (**permalink**) 24.02.2016, 22:06

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

Сам скрипт

<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>

рони · #2 (**permalink**) 24.02.2016, 23:09

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>

alex72bel · #3 (**permalink**) 28.02.2016, 15:55

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

Форум

Справочник

Discord чат

Курсы javascript