Question

我尝试基本上只有一页按钮，点击所有内容向左滑动，新页面从右侧滑入。

我正在处理this JS Fiddle来自其他帖子并尝试将其调整到我的网站，但我不明白为什么它不起作用。

这个小提琴我正在使用这个JQuery：

$('.box').click(function() {
    $('.box').each( function() {
        if ($(this).offset().left < 0) {
            $(this).css("left", "150%");
        }
    });

    $(this).animate({
         left: '-50%'
     }, 500);

     if ($(this).next().size() > 0) {
         $(this).next().animate({
             left: '50%'
         }, 500);
     } else {
         $(this).prevAll().last().animate({
             left: '50%'
         }, 500);
     }
});

这是我的Jquery：

$(document).ready(function () {
  $('.slide').click(function() 
    {
        $('.sliding-container').each( function() {
            if ($(this).offset().left < 0) {
                $(this).css("left", "150%");
        }
    });

    $(this).animate({
         left: '-50%'
     }, 500);

     if ($(this).next().size() > 0) {
         $(this).next().animate({
             left: '50%'
         }, 500);
     } else {
         $(this).prevAll().last().animate({
             left: '50%'
         }, 500);
     }
  });
});

非常感谢任何想法。

请在此处查看我的CodePen，了解其余代码： https://codepen.io/Magicrecon/pen/BRzXRa

Answer 1

基于您之前的代码，这里有指针

删除带有文字slider的id标记，并将其添加为类

第一个容器滑块最后两个。他们应该是兄弟姐妹。

请参阅下面的代码段

$(document).ready(function() {
  $('.slide').click(function() {
    var that = this;
    $('.sliding-container').each(function() {

      if ($(that).parents(".sliding-container")[0] != this) {
        $(this).css("left", "100%")
      } else {
        $(this).animate({
          left: '100%'
        }, 500);
      }
      if ($(that).parents(".sliding-container").next().index() == 3) {
        $(".sliding-container:first-child").animate({
          left: '0%'
        }, 500);
  
      } else {
        $(that).parents(".sliding-container").next().animate({
          left: '0%'
        }, 500);
      }
    });

  });
});

#mainscreen-container {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

.sliding-container {
  position: absolute;
  width: 100vw;
}

#sliding-container1 {
  background-color: red;
}

#sliding-container2 {
  background-color: green;
  left: 150%;
}

#sliding-container3 {
  background-color: blue;
  left: 150%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainscreen-container">
  <div id="sliding-container1" class="sliding-container">
    <div style="height: 100vh; width: 100%">
      <div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: left;">
        <span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh; float: right;" class="fa fa-chevron-left slide-button">&nbsp;</span>
      </div>
      <div class="header-container">
        <div style="height: 40vh; display: block;"></div>
        <p>Click <b style="cursor: pointer;" class="slide">THIS</b> to slide accross</p>
        <div style="height: 20vh; display: block;"></div>
      </div>
      <div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: right;">
        <span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh;" class="fa fa-chevron-right slide-button">&nbsp;</span>
      </div>
    </div>
  </div>
  <div id="sliding-container2" class="sliding-container">
    <div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: left;">
      <span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh; float: right;" class="fa fa-chevron-left">&nbsp;</span>
    </div>
    <div class="header-container">
      <div style="height: 40vh; display: block;"></div>
      <p>Click <b style="cursor: pointer;" class="slide">THIS</b> to slide accross</p>
      <div style="height: 20vh; display: block;"></div>
    </div>
    <div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: right;">
      <span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh;" class="fa fa-chevron-right">&nbsp;</span>
    </div>
  </div>


  <div id="sliding-container3" class="sliding-container">
    <div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: left;">
      <span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh; float: right;" class="fa fa-chevron-left">&nbsp;</span>
    </div>
    <div class="header-container">
      <div style="height: 40vh; display: block;"></div>
      <p>Click <b style="cursor: pointer;" class="slide">THIS</b> to slide accross</p>
      <div style="height: 20vh; display: block;"></div>
    </div>
    <div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: right;">
      <span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh;" class="fa fa-chevron-right">&nbsp;</span>
    </div>
  </div>

Answer 2

$('.slide').click(function() 你的html

中没有类slide的元素

$（本）.animate（{ 左：' - 50％' }，500）;

您单击该ID的元素将获得left: '-50%'的属性，但它不会更改任何内容，因为该元素没有position: absolute css值

在编写代码之前，只需手动更改css以查看添加到元素的jquery规则是否有效。

JQuery - Div没有滑离屏幕

2 个答案: