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

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>

​