jQuery-Div不會滑出屏幕

Question

我試圖從本質上講一頁，然后單擊按鈕，所有內容都滑到左側，新頁面從右側滑入。

我正在另一篇文章中研究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元素

$（this）.animate（{left：'-50％'}，500）;

您單擊的具有該ID的元素將獲得left: '-50%'的屬性left: '-50%'但不會發生任何變化，因為該元素沒有position: absolute css值

在編寫代碼之前，只需手動更改css即可查看添加到元素中的jquery規則是否有效。