超级菜单 - 根据点击的链接向方向滑动面板？

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>