Показать сообщение отдельно
  #7 (permalink)  
Старый 31.05.2015, 22:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Nifler,

мысли вслух активному слайду возможно добавляется класс -- тогда можно решить всё при помощи css через transition-delay - код ниже просто вариант на тему

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
 #alert ~ p {

    width: 100px;

    height: 30px;

    background: #ccc;


  }
  </style>
</head>

<body >
<div id="alert"></div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
 <script>
      (function () {

var div_len = document.querySelectorAll("#alert ~ p");

var i = 0;
    (function foo(a) {
        var counter = 5,
            pixeles = 0,
            time =  setInterval(function () {

            div_len[a].style.transform = 'translateX('+pixeles+'px)'
            div_len[a].style.WebkitTransform = 'translateX('+pixeles+'px)'
            div_len[a].style.WebkitTransform = 'translateX('+pixeles+'px)'
            div_len[a].style.WebkitTransform = 'translateX('+pixeles+'px)'
                        if(pixeles >= 50) {
                clearInterval(time);
                i++;
                if (i < div_len.length)foo(i)
            }

                   pixeles+=counter;

            }, 10)
        })(i);


}());

 </script>
</body>

</html>
Ответить с цитированием