javascript - 巨型菜单 - 根据点击的链接在方向上滑动面板？

Question

我正在创建一个“大型菜单”，其中包含可在导航下方滑入和滑出的大面板。我面临的问题是让面板根据点击的链接是在当前可见链接之前还是之后的方向滑动(所以如果你点击当前可见链接之后的链接，当前面板应该从屏幕向左，新面板应从右侧滑入)。如果您按顺序单击链接，它会按预期工作，但是当您开始无序单击链接时，滑动方向就会困惑。

$('.navigation a').click(function(e) {
  e.preventDefault();
  var prevPanel = $('.navigation a.active').attr('data-panel');
  var currPanel = $(this).attr('data-panel');
  $('.panel').removeClass('active');
  if (currPanel > prevPanel) {
    $('.panel.panel-' + prevPanel).removeClass('active').css('left', '-100%');
    $('.panel.panel-' + currPanel).addClass('active').css('left','0');
  } else {
    $('.panel.panel-' + prevPanel).removeClass('active').css('left', '100%');
    $('.panel.panel-' + currPanel).addClass('active').css('left','0');
  }
  $('.navigation a').removeClass('active');
  $(this).addClass('active');
});

body,html {
  overflow:hidden;
}
.navigation {
  text-align:center;
}
.panel {
  width:100%;
  height:200px;
  position:absolute;
  left:100%;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
  .panel.active {
    left:0;
  }
  .panel-1 {
    background:red;
  }
  .panel-2 {
    background:green;
  }
  .panel-3 {
    background:blue;
  }
  .panel-4 {
    background:orange;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <a href="#" data-panel="1" class="active">Panel 1</a>
  <a href="#" data-panel="2">Panel 2</a>
  <a href="#" data-panel="3">Panel 3</a>
  <a href="#" data-panel="4">Panel 4</a>
</div>
<div class="panel-container">
  <div class="panel panel-1 active">Panel 1 content</div>
  <div class="panel panel-2">Panel 2 content</div>
  <div class="panel panel-3">Panel 3 content</div>
  <div class="panel panel-4">Panel 4 content</div>
</div>

Answer 1

您所要做的就是在执行滑入动画之前重置定位。

$('.navigation a').click(function(e) {
  e.preventDefault();
  var prevPanel = $('.navigation a.active').attr('data-panel');
  var currPanel = $(this).attr('data-panel');
  
  $('.panel').removeClass('active');
  if (currPanel > prevPanel) {
    $('.panel.panel-' + prevPanel).removeClass('active').css('left', '-100%');
    $('.panel.panel-' + currPanel).addClass('active').css('left','0');
  } else {
    $('.panel.panel-' + prevPanel).removeClass('active').css('left', '100%');
    $('.panel.panel-' + currPanel).addClass('active').css('left','0');
  }
  // reset positioning
  $(".panel:lt("+ (currPanel - 1) +")" ).css('left','-100%');
  $(".panel:gt("+ (currPanel - 1) +")" ).css('left','100%');
  // continue
  $('.navigation a').removeClass('active');
  $(this).addClass('active');
});

body,html {
  overflow:hidden;
}
.navigation {
  text-align:center;
}
.panel {
  width:100%;
  height:200px;
  position:absolute;
  left:100%;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
  .panel.active {
    left:0;
  }
  .panel-1 {
    background:red;
  }
  .panel-2 {
    background:green;
  }
  .panel-3 {
    background:blue;
  }
  .panel-4 {
    background:orange;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <a href="#" data-panel="1" class="active">Panel 1</a>
  <a href="#" data-panel="2">Panel 2</a>
  <a href="#" data-panel="3">Panel 3</a>
  <a href="#" data-panel="4">Panel 4</a>
</div>
<div class="panel-container">
  <div class="panel panel-1 active">Panel 1 content</div>
  <div class="panel panel-2">Panel 2 content</div>
  <div class="panel panel-3">Panel 3 content</div>
  <div class="panel panel-4">Panel 4 content</div>
</div>