全屏内容滑块仅向右滑动

Question

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

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

    $("#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>

下一个效果很好，但上一个效果不佳。有什么想法吗？

Answer 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);
          //=================================
});

全屏内容滑块仅向右滑动

Full Screen Content Slider Only Slides Right

css

jquery

css-transitions

jquery-animate