Javascript-форум - Плавная смена текста в div

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

- jQuery (https://javascript.ru/forum/jquery/)

- - Плавная смена текста в div (https://javascript.ru/forum/jquery/68597-plavnaya-smena-teksta-v-div.html)

Плавная смена текста в div

Здравствуйте, прошу прощения, если я создал тему не в том разделе, так как я не знаю данного языка вообще.

Столкнулся с одной задачей, постараюсь объяснить ее суть.

Предположим средствами php в цикле мы вывели блоки:

Соответственно в каждом разная инфа, разные товары

<div class="product_list">
	<div class="image"><img src="" alt="" /></div>
	<div class="title">
		<span>Сапог</span>
		<span>Sapog</span>
	</div>
	<div class="cat">cat</div>
	<div class="coin">coin</div>
</div>

<div class="product_list">
	<div class="image"><img src="" alt="" /></div>
	<div class="title">
		<span>Сандаль</span>
		<span>Sandal</span>
	</div>
	<div class="cat">cat</div>
	<div class="coin">coin</div>
</div>

<div class="product_list">
	<div class="image"><img src="" alt="" /></div>
	<div class="title">
		<span>Шлепанец</span>
		<span>Shlepanec</span>
	</div>
	<div class="cat">cat</div>
	<div class="coin">coin</div>
</div>

В блоке <div class="title"></div> есть 2 тега <span> их может быть в принципе больше.

Требуется перебирать в блоке <div class="title"></div> все имеющиеся <span> и плавно их менять через скажем 2-5 секунд. Дошел перебор до конца, начался заново.

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

Прошу прощения за наглость, спасибо!

qpurypaHT,

Цитата:

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

Требуется перебирать в блоке <div class="title"></div> все имеющиеся <span> и плавно их менять через скажем 2-5 секунд.

Т.е. показывать только по одному?

Цитата:

Сообщение от Dilettante_Pro (Сообщение 451082)

qpurypaHT,

Т.е. показывать только по одному?

Да, что-то типа такого, пример в фотошопе, вывел скажем средством php цикл товаров с БД - и в каждом блоке <div class="title"> перебрал <span> их всяко у меня будет 2, на русском и английском языке

На картинке нет эффекта плавного затухания, вот спустя часы нашел что-то подобное

Он работает, но если только в выводить блоки не циклом, а одному товару задать для <span> класс text-block, в противном случае работает лишь в одном, тут я так понимаю ключи должны быть

qpurypaHT,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .title{
    position:relative;
    height:1em;
  }

  .title span{
    position:absolute;
    -webkit-animation:op 5s ease-in-out infinite;
    -moz-animation:op 5s ease-in-out infinite;
    -o-animation:op 5s ease-in-out infinite;
    animation:op 5s ease-in-out infinite;
    opacity:1;
  }

  .title span:nth-child(2){
    -webkit-animation-delay:2.5s;
    -moz-animation-delay:2.5s;
    -o-animation-delay:2.5s;
    animation-delay:2.5s;
  }

  @keyframes op{
    5%,50%{
      opacity:0;
    }

    0%,55%{
      opacity:1;
    }
  }

  @-webkit-keyframes op{
    5%,50%{
      opacity:0;
    }

   0%, 55%{
      opacity:1;
    }
  }
  </style>
</head>

<body>

<div class="product_list">
  <div class="image"><img src="" alt="" /></div>
  <div class="title">
    <span>Сапог</span>
    <span>Sapog</span>
  </div>
  <div class="cat">cat</div>
  <div class="coin">coin</div>
</div>

<div class="product_list">
  <div class="image"><img src="" alt="" /></div>
  <div class="title">
    <span>Сандаль</span>
    <span>Sandal</span>
  </div>
  <div class="cat">cat</div>
  <div class="coin">coin</div>
</div>

<div class="product_list">
  <div class="image"><img src="" alt="" /></div>
  <div class="title">
    <span>Шлепанец</span>
    <span>Shlepanec</span>
  </div>
  <div class="cat">cat</div>
  <div class="coin">coin</div>
</div>


</body>
</html>