Упрощать код, который чередует divs стиль GIF

У меня есть этот код, который чередует divs в зависимости от Вашей идентификации в интервале времени, вышедшем стилю GIF.

Мне хотелось бы знать, есть ли манера упрощать код и это делать в зависимости от класса или каким-то образом проще, потому что, если у меня есть 20 слов, которые я хочу, чтобы они изменились, станет более тяжелым документ, и хочу предотвратить это.

jQuery(function () {
    var $els = $('div[id^=picturez7]'),
        i = 0,
        len = $els.length;

    $els.slice(1).hide();
    setInterval(function () {
        $els.eq(i).fadeOut(0, function () {
            i = (i + 1) % len
            $els.eq(i).fadeIn(0);
        })
    }, 600)
})
jQuery(function () {
    var $els = $('div[id^=pictureS7]'),
        i = 0,
        len = $els.length;

    $els.slice(1).hide();
    setInterval(function () {
        $els.eq(i).fadeOut(0, function () {
            i = (i + 1) % len
            $els.eq(i).fadeIn(0);
        })
    }, 600)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=pictureS7>
  DALES
  </div>
<div id=pictureS72>
  GASOLINA
  </div>
<div id=pictureS73>
 A ELLAS LES GUSTA
  </div>
<div id=pictureS73>
 LA GASOLINA
  </div>
<div id=pictureS7>
  HOLA
  </div>
<div id=picturez72>
  QUE TAL
  </div>
<div id=picturez73>
  SOY EL CHICO DE LAS POESÍAS
  </div>
<div id=picturez73>
  TU FIEL ADMIRADOR
  </div>
0
задан 31.03.2016, 02:07
1 ответ

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

function GIf(Selector) {
    var $els = $(Selector),
        i = 0,
        len = $els.length;

    $els.slice(1).hide();
    setInterval(function () {
        $els.eq(i).fadeOut(0, function () {
            i = (i + 1) % len
            $els.eq(i).fadeIn(0);
        })
    }, 600)
 };

 GIf('div[class^="picturez7"]');
 GIf('div[class^="pictureS7"]');

И HTML был бы чем-то как это:

<div class=pictureS7>
  DALES
  </div>
<div class=pictureS72>
  GASOLINA
  </div>
<div class=pictureS73>
 A ELLAS LES GUSTA
  </div>
<div class=pictureS73>
 LA GASOLINA
  </div>
<div class=pictureS7>
  HOLA
  </div>
<div class=picturez72>
  QUE TAL
  </div>
<div class=picturez73>
  SOY EL CHICO DE LAS POESÍAS
  </div>
<div class=picturez73>
  TU FIEL ADMIRADOR
  </div>

Demo в живом. Здесь только перемещать селектор, ты назовешь эффект, который ты желаешь.

2
ответ дан 24.11.2019, 14:40
  • 1
    Он совершенный, что он искал просто, так это манера облегчать c и # 243; я говорю. Спасибо за вклад. – Ivan Soler 31.03.2016, 02:01
  • 2
    @IvanSoler ничего для этого мы. – Wilfredo 31.03.2016, 02:02
  • 3
    Прости, я пробую делать это для < pre> и он не позволяет это мне, нужно изменять что-то? – Ivan Soler 31.03.2016, 02:14
  • 4
    @IvanSoler для pre он равен, но селектор меняется, смотрит пример здесь jsfiddle.net/hxojagzx/1 , обновленные с pre. – Wilfredo 31.03.2016, 02:17
  • 5
    Contin и # 250; чтобы, без функционировать, должен быть какой-то interacci и # 243; n, который я не знаю с оставшейся частью c и # 243; я говорю; tendr и # 233; который поддерживать это схвати, и # 237;. Спасибо. – Ivan Soler 31.03.2016, 02:36

Теги

Похожие вопросы