CODEWITHSUNDEEP
javascriptjquerycss
pourmesomecode
pourmesomecode

Reputation: 4318

Delay on loading in elements jQuery

So I have a list of li elements that I'm trying to get to load in one by one.

So you hit the page, first one moves in using css transform: translateX() from the left and fades in. Then the next, and so forth.

My index.html looks like :

<div class="list_wrapper">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
</div>

I have a few styles that add a background image and display block etc. to get the li tags to line up side-by-side but I've not added them in because I don't want to make the question too long.

EDIT :

Each one of my li tags has the styles to start them further left so the load in moves them like so : transform: translateX(-10%);

My jQuery : 

$(function() {
    $('.list_wrapper li').each(function(i) {
    $(this).delay((i++) * 500).css({
      'opacity': '1',
      'transform': 'translateX(0%)'
    })
  })
});

Whenever I hit the page it adds the styles to the li tags straight away. It doesn't do the jQuery delay that I'm trying to pass through.

Upvotes: 1

Views: 1190

Answers (3)

Alex.Me
Alex.Me

Reputation: 616

You may use setTimeout() instead:

$('.list_wrapper li').each(function(i) {
    var $item = $(this);
      setTimeout(function () {
        $item.css({
          'opacity': '1',
          'transform': 'translateX(0%)'
        });
      }, (i + 1) * 500);
});

Upvotes: 0

elreeda
elreeda

Reputation: 4597

why you dont use setTimeout so simple and try this

$('button').click(function(){
  $('li').each(function(i){
    setTimeout(function(){
      $('li').eq(i).css({
      	'transform': 'translateX(0%)',
        'opacity': 1
      });
    }, 1000*i)
  })
})
li{
  transition: all 0.7s ease-in-out;
  transform: translateX(-10%);
  opacity: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list_wrapper">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
</div>
<button>ok</button>

Upvotes: 4

codisfy
codisfy

Reputation: 2183

As the manual mentions here https://api.jquery.com/delay/

Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

So you cannot use .delay() the way that you intend to, a setTimeout might help in the effect that you are trying to achieve, by sending of the next li to be show to the function in setTimeOut

More from the manual

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Upvotes: 2

Related Questions