javascript - 滑动后续的 div，一个放在另一个下面

Question

我想将放置在另一个下方的 div 滑动，但我不知道如何在它顶部的 div 滑动后选择下一个 div。

在此示例中，一旦红色 div 滑动，我如何选择蓝色 div 滑开。我需要选择顶部的 div，因为每个 div 都会有一个与键码关联的函数。

JSFiddle:https://jsfiddle.net/q8ddpqsc

$(document).ready(function() {            
  $(document).keyup(function (e) {
    var keyCode = e.keyCode || e.which,
        arrow = {
          left: 37,
          up: 38,
          right: 39,
          down: 40
        };
    switch (keyCode) {
      case arrow.left: 
        $(".red").animate({ "left": "-100%" }, "slow");
        break;
      case arrow.right: 
        $(".red").animate({ "left": "0%" }, "slow");
        break;
    }
  });
});

html, body {
  height: 100%;
  margin: 0;
  display: flex;
}
.red {
  background-color: red;
  height: 100%;
  width: 100vw;
  position: absolute;
  z-index: 3;
}
.blue {
  background-color: blue;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 2;
}
.green {
  background-color: green;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>

Answer 1

我的理解是您希望 div 根据按下的向右或向左箭头键滑动。这就是您所需要的。使用事件类(类可以有任何名称不需要事件，我已经使用事件)，这将帮助您获得当前的顶部 div 并使用它您可以获得下一个和上一个 div 并相应地滑动它们。

$(document).ready(function(){            
    $(document).keyup(function (e) {
        var keyCode = e.keyCode || e.which,
        arrow = {left: 37, up: 38, right: 39, down: 40 };
	    var currentDiv=$('.active');
        switch (keyCode) {
            
            case arrow.left:
                if (currentDiv.next("div").length>0) {
                    currentDiv.animate({ "left": "-100%" }, "slow");
                    currentDiv.next("div").addClass("active");
                    currentDiv.removeClass("active");
                }
                
            break;
            
            case arrow.right:
                if (currentDiv.prev("div").length>0) {
                    currentDiv.prev("div").animate({ "left": "0%" }, "slow");
                    currentDiv.prev("div").addClass("active");
                    currentDiv.removeClass("active");
                }
            break;
        }
    });
});

	html, body {
  height: 100%;
  margin: 0;
  display: flex;
}
.active{
z-index:100;
}
.red {
  background-color: red;
  height: 100%;
  width: 100vw;
  position: absolute;
  z-index: 3;
}


.blue {
		background-color: blue;
		height: 100%;
		width: 100%;
		position: absolute;
    z-index: 2;
	}
  
  .green {
		background-color: green;
		height: 100%;
		width: 100%;
		position: absolute;
    z-index: 1;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red active"></div>
<div class="blue"></div>
<div class="green"></div>

这是更新的 Fiddle无论存在多少个分区，此代码都将起作用。

有关 .next() 和 .prev() 的更多信息，请查看

1. https://api.jquery.com/next/
2. https://api.jquery.com/prev/