Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Удалить класс элементов набора (https://javascript.ru/forum/jquery/60722-udalit-klass-ehlementov-nabora.html)

Fedul 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)
});


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

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

рони 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 17.01.2016 15:09

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

рони 17.01.2016 16:06

join,
:)

Fedul 17.01.2016 22:39

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


Часовой пояс GMT +3, время: 05:43.