Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.04.2017, 02:27
Новичок на форуме
Отправить личное сообщение для qpurypaHT Посмотреть профиль Найти все сообщения от qpurypaHT
 
Регистрация: 26.02.2017
Сообщений: 7

Плавная смена текста в 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 секунд. Дошел перебор до конца, начался заново.

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

Прошу прощения за наглость, спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 26.04.2017, 11:23
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

qpurypaHT,
Сообщение от qpurypaHT
Требуется перебирать в блоке <div class="title"></div> все имеющиеся <span> и плавно их менять через скажем 2-5 секунд.
Т.е. показывать только по одному?
Ответить с цитированием
  #3 (permalink)  
Старый 26.04.2017, 11:39
Новичок на форуме
Отправить личное сообщение для qpurypaHT Посмотреть профиль Найти все сообщения от qpurypaHT
 
Регистрация: 26.02.2017
Сообщений: 7

Сообщение от Dilettante_Pro Посмотреть сообщение
qpurypaHT,

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



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



На картинке нет эффекта плавного затухания, вот спустя часы нашел что-то подобное
Ответить с цитированием
  #4 (permalink)  
Старый 26.04.2017, 11:50
Новичок на форуме
Отправить личное сообщение для qpurypaHT Посмотреть профиль Найти все сообщения от qpurypaHT
 
Регистрация: 26.02.2017
Сообщений: 7

Он работает, но если только в выводить блоки не циклом, а одному товару задать для <span> класс text-block, в противном случае работает лишь в одном, тут я так понимаю ключи должны быть
Ответить с цитированием
  #5 (permalink)  
Старый 26.04.2017, 15:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переносы строк в div contenteditable при выделении текста NapalmRain Элементы интерфейса 13 19.08.2016 13:14
Если размера div не хватает для текста Гробовщик (X)HTML/CSS 7 19.07.2013 00:44
Js + moo tools плавная смена div mansoff Events/DOM/Window 1 03.02.2010 11:11
Плавная смена текста NexGala Элементы интерфейса 2 22.08.2009 05:47