Форум

Fedul · #1 (**permalink**) 16.01.2016, 12:12

Добрый день!
подскажите пожалуйста как удалить классы у элементов набора начиная с последнего
имею структуру

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

по событию присваиваю им класс и отображаю

$("ul > li").each(function(i, e){
  setTimeout(function(){
    $(e).removeClass('animated')
  }, i * 200)
});

тут все получается, они анимируются с первого и до последнего.

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

рони · #2 (**permalink**) 17.01.2016, 00:02

Fedul,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  li {
    color: #FFFFFF;
    background-color: #0000CD;
    width: 10px;
    transition: .8s all ease-in-out;
  }
  .animated{
    width: 200px;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
    var a = $.makeArray($("ul > li"));

function fn()
{

 $.each(a.reverse(),function(i, e){
  setTimeout(function(){
    $(e).toggleClass('animated');
  i + 1 == a.length && setTimeout(fn,1000);
  }, i * 200)
})

}
fn()
});


  </script>
</head>

<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>



</body>

</html>

join · #3 (**permalink**) 17.01.2016, 15:09

рони,
круто реверс сделан =) прямо в цикле.

рони · #4 (**permalink**) 17.01.2016, 16:06

join,

Fedul · #5 (**permalink**) 17.01.2016, 22:39

Рони, спасибо огромное - Вы как всегда на высоте!)

Форум

Справочник

Discord чат

Курсы javascript