JQuery. apply css to each element with a class using delay

Question

I've just take a look on a lot of answer on stack but nothing seems can work on this. I'me trying to apply a style to all element of a list li sequentially using delay. The script show just the last item of the list. What's the problem? thanks in advance for your help

$('ul li').each(function(i){
licont = this
  setTimeout(function(){
    $(licont).css('opacity','1')
  },i * 10);                  
});

li{
  opacity:0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>ITEM 1</li>
  <li>ITEM 2</li>
  <li>ITEM 3</li>
  <li>ITEM 4</li>
</ul>

I think you left out the variable declaration in line 2, can you edit? — Douglas Tyler Gordon
– Douglas Tyler Gordon, Commented May 11, 2017 at 20:05

guest271314 · Accepted Answer · 2017-05-11 20:06:44Z

3

You can pass the current element as a jQuery object as a parameter to setTimeout to reference current jQuery object within .each() when function passed to setTimeout is called

$('ul li').each(function(i) {
  setTimeout(function(el) {
    el.css('opacity', '1')
  }, i * 1000, $(this));
});

li {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>ITEM 1</li>
  <li>ITEM 2</li>
  <li>ITEM 3</li>
  <li>ITEM 4</li>
</ul>

answered May 11, 2017 at 20:06

guest271314

1

Sign up to request clarification or add additional context in comments.

4 Comments

vlk Over a year ago

Thank you, I was looking a better way to pass the current element to child functions for other applications also.

guest271314 Over a year ago

What do you mean by "better"? What are "child functions"?

guest271314 Over a year ago

See also Execute function queue in javascript, When the page is loaded,how to make six functions executed by each otherr?

vlk Over a year ago

I was using a var licont = this to pass the current element inside the setTimeout function. I think your is a better way to do it. I mean I was looking for this.

Collectives™ on Stack Overflow

JQuery. apply css to each element with a class using delay

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related