全屏内容滑块仅向右滑动答案

【问题标题】：Full Screen Content Slider Only Slides Right全屏内容滑块仅向右滑动
【发布时间】：2016-10-31 01:00:36
【问题描述】：

我目前正在开发一个全屏滑块，它应该根据用户单击的按钮向左或向右移动。单击下一个时效果很好，但是单击上一个时，滑块只是淡入，而不是滑动，尽管与下一个按钮具有相同的代码（但边距相反）。

这是我正在做的事情（下一个和上一个按钮）：

    $("#prevproject").click(function(e) {
    e.preventDefault();
    //subtract 1 from i unless i is 0, then set i = 12 (last element)

    if (i == 0) {
      i = 12;
    } else {
      i = i - 1;
    }
    $('#project').attr('data-name', projects[i]);
    $('#project #slide').animate({
          'marginRight': '25%',
          'opacity': 0
        }, 200, function() {

          switchProjects(projects[i]);

          $('#project #slide').css({
            'marginRight': '-25%'
          });
          $('#project #slide').animate({
            'marginRight': '0',
            'opacity': 1
          }, 200);
          //=================================
});




});

$("#nextproject").click(function(e) {
    e.preventDefault();
    //add 1 from i unless i is 12, then set i = 0

    if (i == 12) {
      i = 0;
    } else {
      i = i + 1;
    }

    $('#project').attr('data-name', projects[i]);
    $('#project #slide').animate({
          'marginLeft': '25%',
          'opacity': 0
        }, 200, function() {

          switchProjects(projects[i]);

          $('#project #slide').css({
            'marginLeft': '-25%'
          });
          $('#project #slide').animate({
            'marginLeft': '0',
            'opacity': 1
          }, 200);
          //=================================
});

我有一个带有内部 div 的容器 div，并将幻灯片效果放在内部 div 上。内容在屏幕外通过 switchProjects 函数加载，并与新内容一起滑回。

 <div id="project">
  <div id="slide">
  <div class="row">
    <div class="column small-12 medium-4">
      <h4></h4>
      <p></p>
      <img alt="" id="map"/> </div>
  </div>
  </div>
</div>

对于下一个但不是以前的效果很好。有什么想法吗？

【问题讨论】：

标签： jquery css jquery-animate css-transitions

【解决方案1】：

对于任何人来说。解决方案是将 marginLeft 设置为我在下一个函数中所做的与设置 marginRight 的相反。

$('#project #slide').animate({
          'marginLeft': '-25%',
          'opacity': 0
        }, 200, function() {

          switchProjects(projects[i]);

          $('#project #slide').css({
            'marginLeft': '25%'
          });
          $('#project #slide').animate({
            'marginLeft': '0',
            'opacity': 1
          }, 200);
          //=================================
});

【讨论】：