Question

我想逐个显示一些div，屏幕左侧或右侧有滑动效果。到目前为止，我被困在this

之间

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

和that

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

但是无论div的顺序如何，我都需要这个，因为＆＃34; left＆＃34;或＆＃34;对＆＃34;物品将随机出现。

帮助将非常感激，因为我不像我在jQuery中所希望的那样称职。 ^^

Answer 1

以下使用all变量来保留所有div的列表。单击该按钮时，将执行slideNext()功能，检查当前项的类以决定切换方向，并指定slideNext（本身）作为切换完成时要运行的功能。

＆＃13;

$(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++;
    })();
  });
});

＆＃13;

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

＆＃13;

Answer 2

您可以使用each()循环中的索引作为延迟，并根据条件设置方向，如果当前div hasClass()已离开。

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

jQuery - 逐步显示div

2 个答案: