js ul lis appear one post one

Question

js ul lis appear one post one

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

So I have a ul with its li's .

I would like to make a js so that every li appears and disappears ( automatically in an infinite loop ) to make way for the next li . That is, every li appears in sequence.

Something of the Type:

HTML

    <ul>
      <li> 1 </li>
      <li> 2 </li>
      <li class="ativa"> 3 </li>
      <li> 4 </li>
    </ul>

...

    <ul>
      <li> 1 </li>
      <li> 2 </li>
      <li> 3 </li>
      <li class="ativa"> 4 </li>
    </ul>

CSS:

li{
    opacity:0;
}
.ativa {
    opacity:1;
}

Any tips? Thanks to anyone who could help!

Add:

So, I did this jQuery

$(document).ready(function(e) {                           

  function addcls() {
    var li = $(".cycle-slideshow div.atividades ul li.ativa");
    li.removeClass('ativa');
    var current = li.removeClass('ativa');
    next = current.next().length ? current.next() : current.siblings().filter(':first');
    next.addClass('ativa');
  };

   setInterval(function () {
          addcls();
         }, 2000);  

});

And the css, like this:

div.atividades ul li{
    display:none;
    vertical-align:middle;
    line-height:100px;
    position:absolute;
    border:.1px  #000 solid;
    width:100%;
    text-align:center;
    font-size:36px;
}


.ativa {
    display:block;
}

What is giving error is that when I do:

div.atividades ul li{
    display:none;

all the lines are gone: obviously. However, when I do

next.addClass('ativa');

Although in spectrum lis are gaining and losing classe ativa usually by javascript , display: block does not occur

javascript css css3

asked by anonymous 19.04.2018 / 12:48

2 answers

Create new tab in Google Spreadsheets from a script Change HeaderText from a columngroup radgrid da telerik

score 0 · Answer 1

Carlos as requested in the comment follows an option with only CSS. If you want to increase the duration of the animation, increase the value here animation-duration:4s I commented in the code

See the result:

ul li {
    opacity: 0;
    animation-duration: 4s; /* duração da animação */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    font-size: 2rem;
}
ul li:nth-child(1) {
    animation-name: teste1;
}
ul li:nth-child(2) {
    animation-name: teste2;
}
ul li:nth-child(3) {
    animation-name: teste3;
}
ul li:nth-child(4) {
    animation-name: teste4;
}

@keyframes teste1 {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
}
@keyframes teste2 {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    55% {
        opacity: 0;
    }
}
@keyframes teste3 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    55% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
}
@keyframes teste4 {
    0% {
        opacity: 0;
    }
    70% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

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

OBS: The animation is synchronized to work with 4 LI in 4 intervals of 4. If you want to change it you will have to move the percentages from @keyframes to "equalize" p>

score 0 · Answer 2

To do this, use setInterval to give the waiting time. At each time interval called by setInterval , you move to the next element (returning to 0 if it is in the last one) and it changes the classes. To remove and add classes you can use classList .

Example:

const lis = document.querySelectorAll("li");
let corrente = 2; //corresponde ao terceiro li (posições começam em 0)

setInterval(() => {
    lis[corrente].classList.remove("ativa"); //remove a classe no elemento corrente
    corrente = (corrente + 1) % lis.length; //passa para o próximo
    lis[corrente].classList.add("ativa"); //adiciona a classe no novo
}, 500); //500 milisegundos entre cada chamada

li{
    opacity:0;
}
.ativa {
    opacity:1;
}

<ul>
  <li> 1 </li>
  <li> 2 </li>
  <li class="ativa"> 3 </li>
  <li> 4 </li>
</ul>

To add a class I used classList.add and to remove classList.remove . In the next step, I used the % operator, which makes sure that the element does not exceed the size of the array:

corrente = (corrente + 1) % lis.length;

Another alternative to this would be:

corrente++;
if (corrente >= lis.length){
    corrente = 0;
}

Or even with a ternary:

corrente = (corrente + 1 >= lis.length) ? 0 : corrente + 1;

Notice that I manually typed the position of the element that started active. You can also find this element dynamically using for example findIndex , which gives you the position of a certain element:

let corrente = [...lis].findIndex(li => li.classList.contains("ativa"));
if (corrente == -1){ //se não existe 
    corrente = 0; //começa no primeiro
}

The test done within findIndex checks if the element has the class with classList.contains .

Edit :

Looking at your code in JQuery, you should use show and hide to show and hide elements, since it is for this purpose that these functions were created. If you need to show or hide in more showy ways, you have several variants from with slide, fade, etc ...

As for moving to the next element, you should do so at the cost of next() and if you see that it is in an invalid return to the first one, you get the pseudo selector :first .

So:

$(document).ready(function(e) {
  var li = $(".cycle-slideshow div.atividades li.ativa");
  var first = $(".cycle-slideshow div.atividades ul li:first");
  li.show();
  
  function addcls() {  
    li.hide().removeClass("ativa");
    li = li.next();
    if (!li.length){ //se passou o ultimo
      li = first; //volta ao primeiro
    }
    li.show().addClass("ativa");
  };

   setInterval(addcls, 500);  
});

div.atividades ul li{
    display:none;
    vertical-align:middle;
    line-height:100px;
    position:absolute;
    border:.1px  #000 solid;
    width:100%;
    text-align:center;
    font-size:36px;
}

.ativa {
    color:lightBlue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="cycle-slideshow">
  <div class="atividades">
    <ul>
      <li> 1 </li>
      <li> 2 </li>
      <li class="ativa"> 3 </li>
      <li> 4 </li>
    </ul>
  </div>
</div>

I left the class ativa in it but without the display:block because this is already done in show . Now you should only put other visual styles that make sense to the element that is active.