jQuery - progressivly divを表示

Question

画面の左または右の部分からスライディングエフェクトを使用して、いくつかのdivを1つずつ表示したいと思います。これまでのところ私はこだわって

しかし、「左」または「右」のアイテムがランダムに来るので、私は、どんなにdiv要素の順序を動作するようにこれが必要

<button id='animer'>animer</button> 
<div class="all">from left</div> 
<div class="all">from right</div> 
<div class="all">from left</div> 
<div class="all">from right</div> 

<script> 
$(function() { 
    $('.all').hide(); 
    $('#animer').click(function() { 
     $('.all').first().show('slow', function showNextOne() { 
     $(this).next('.all').show('slow', showNextOne); 
     });  
    }); 
    }); 
</script> 

<button id='animer'>animer</button> 
<div class="left">from left</div> 
<div class="right">from right</div> 
<div class="left">from left</div> 
<div class="right">from right</div> 

<script> 
$(function() { 
    $('.left, .right').hide(); 
    $('#animer').click(function() { 
     $(".left").toggle("slide", {direction: "left"}, 500); 
     $(".right").toggle("slide", {direction: "right"}, 500); 
    }); 
}); 
</script> 

this間と that。

私はjQueryで望んでいるほど能力がありませんので、ヘルプは非常に高く評価されます。 ^^

Answer 1

現在のdivが残っていれば、条件に基づいて遅延と方向を設定するためのループはeach()ループからのインデックスを使用できます。

$(function() { 
 
    $('div').hide(); 
 
    $('#animer').click(function() { 
 
    $('div').each(function(i) { 
 
     let dir = $(this).hasClass('left') ? 'left' : 'right'; 
 
     $(this).delay(i * 1000).toggle('slide', {direction: dir}) 
 
    }) 
 
    }); 
 
});

h1 { 
 
    font-family: Helvetica, Arial; 
 
    font-weight: bold; 
 
    font-size: 18px; 
 
} 
 

 
body { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 

 
<h1>HTML Slider Test</h1> 
 
<button id='animer'>animer</button> 
 
<div class="left">from left</div> 
 
<div class="right">from right</div> 
 
<div class="left">from left</div> 
 
<div class="right">from right</div>

Answer 2

以下は、div要素のすべてのリストを維持するためにall変数を使用しています。ボタンがクリックされると、slideNext()関数が実行され、現在の項目のクラスをチェックしてトグル方向を決定し、slideNext（自身）をトグルが完了したときに実行する関数として指定します。

$(function() { 
 
    var all = $('.left, .right').hide(); 
 
    $('#animer').click(function() { 
 
    var i = 0; 
 
    (function slideNext() { 
 
     if (i < all.length) { 
 
     var current = all.eq(i); 
 
     current.toggle("slide", { 
 
      direction: current.hasClass("left") ? "left" : "right" 
 
     }, 500, slideNext); 
 
     } 
 
     i++; 
 
    })(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> 
 
<button id='animer'>animer</button> 
 
<div class="left">from left</div> 
 
<div class="right">from right</div> 
 
<div class="left">from left</div> 
 
<div class="right">from right</div>