要素jQueryの読み込みの遅延

debugcn 投稿 Dev

pourmesomecode

だから私は私がli一つずつロードしようとしている要素のリストを持っています。

したがって、ページにアクセスすると、最初のページtransform: translateX()は左からcssを使用して移動し、フェードインします。次に、次のように続きます。

私のindex.htmlように見えます：

<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>

liタグを並べて表示するために背景画像や表示ブロックなどを追加するスタイルがいくつかありますが、質問を長くしたくないので追加しませんでした。

編集：

私のliタグのそれぞれには、それらをさらに左に開始するためのスタイルがあるので、のロードはそれらを次のように移動します：transform: translateX(-10%);

私のjQuery：

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

ページにアクセスするたびに、liタグにスタイルがすぐに追加されます。delay私が通過しようとしているjQueryは実行されません。

elreeda

なぜsetTimeoutそんなに単純に使わないのか、これを試してみてください

$('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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]