使用 jQuery 将 div 滑出屏幕答案

【问题标题】：Slide a div offscreen using jQuery使用 jQuery 将 div 滑出屏幕
【发布时间】：2011-06-12 03:06:36
【问题描述】：

这有点挑战。这就是我要找的东西：

屏幕上有 3 个 div
Div 1 位于页面中间（居中）
Div 2 位于屏幕最左侧的右侧
Div 3 位于屏幕最右侧
OnClick，Div 1 滑到 Div 2 所在的位置（向左），Div 2 完全滑出屏幕，Div 3 滑到 Div 3 所在的位置（中间，居中）。一个新的 div 出现在右侧。

我尝试过使用 jQuery 动画和 AddClass。 jQuery 不喜欢将 div 滑出屏幕。

有什么想法吗？

有关我所描述的示例，请访问 Groupon.com。我认为这是一个很酷的想法，并且给了自己重新创建它的挑战。到目前为止，还没有骰子。

-D

【问题讨论】：

到目前为止你有什么？
"jQuery 不喜欢将 div 滑出屏幕" ...您只需将元素（即 abs 定位）动画到负左偏移量..（此处示例 -> jsfiddle.net/steweb/tUU7a）
展示您目前拥有的东西，我们将帮助解决未按计划工作的部分。

标签： javascript jquery html css

【解决方案1】：

这样的？

http://jsfiddle.net/jtbowden/ykbgT/embedded/result/

http://jsfiddle.net/jtbowden/ykbgT/

这是基本功能。它不能扩展到更多的 div 等，但这应该可以帮助您入门。

关键是将你的元素包装在一个容器中，并隐藏溢出。

更新：

这是一个稍微好一点的版本，可以处理任意数量的 div（大于 1）：

http://jsfiddle.net/jtbowden/ykbgT/1/

进一步简化：

http://jsfiddle.net/jtbowden/ykbgT/2/

代码 sn-p：

$('.box').click(function() {

    $(this).animate({
        left: '-50%'
    }, 500, function() {
        $(this).css('left', '150%');
        $(this).appendTo('#container');
    });

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

body {
    padding: 0px;    
}

#container {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;  
}

.box {
    position: absolute;
    width: 50%;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    left: 150%;
    top: 100px;
    margin-left: -25%;
}

#box1 {
    background-color: green;
    left: 50%;
}

#box2 {
    background-color: yellow;
}

#box3 {
    background-color: red;
}

#box4 {
    background-color: orange;
}

#box5 {
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    
    <div id="box1" class="box">Div #1</div>
    <div id="box2" class="box">Div #2</div>
    <div id="box3" class="box">Div #3</div>
    <div id="box4" class="box">Div #4</div>
    <div id="box5" class="box">Div #5</div>
    
</div>

【讨论】：

+1 以获得良好的可靠演示并击败我。 ;-)（并且使用 % 而不是我使用像素：swearing:)
同意。我为此工作了大约 3 个小时，但离这个还很远。万分感谢！这是一件艺术品:)
好吧，对不起，这需要永远。我不知道如何接受它；）再次感谢！
哇。正好一年后投了反对票。我希望人们能评论为什么他们有时会投反对票。
我想补充一点，这种技术（使用百分比动画）在 jQuery 1.7.2 的 IE8 中中断。我已经退回到 $("body").width()+"px" ，这似乎可行。

【解决方案2】：

也许我误解了。我虽然你想要三个连续的 div，而且只有最后的那些滑动等等。

http://jsfiddle.net/acsfy/

（我知道你为此使用了 jQuery，但它让我很生气，因为我试图强迫它工作。你必须根据你的目的调整它。）

【讨论】：

我曾经对 jQuery 有同样的感觉。然后有一天它点击了，我没有回头。再见document.getElementById()！
@Jeff 我想我正处于那个开关的风口浪尖上。前几天，我正在处理这个复杂的导航问题——抓取链接、更改样式、效果等。最后期限迫在眉睫，所以我只是说，“去死吧”，然后切换到 jQuery。我花了十分钟和 20 行 - 20 行！ - 做整件事。它可能没有“点击”，但这只是时间问题。

【解决方案3】：

扩展 Jeff B 答案，我已将Hammer.js 包括在内并制作了一个循环列表。

$(function() {
$("#esq").click(function() {
    console.log("Esquerda !");
    var obj = $(".ativo");
    $(obj).animate({
        left: '-50%'
    }, 500, function() {
        $(this).css('left', '+150%');
        $(this).appendTo('#container');
    });
    $(obj).next().animate({
        left: '+50%'
    }, 500, function() {
        $(this).addClass('ativo');
        $(obj).removeClass('ativo');
    });
});

$("#dir").click(function() {
    console.log("Direita !");
    var obj = $(".ativo");
    var prox = $(obj).siblings(":last");
    $(obj).animate({
        left: '+150%'
    }, 500, function() {
        $(prox).prependTo('#container');
    });
    $(prox).css('left', '-50%');
    $(prox).animate({
        left: '+50%'
    }, 500, function() {
        $(this).addClass('ativo');
        $(obj).removeClass('ativo');
    });
});

var hammertime = new Hammer(document.getElementById("container"));
hammertime.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL});
hammertime.on('swipeleft', function() {
    $("#esq").trigger("click");
});
hammertime.on('swiperight', function() {
    $("#dir").trigger("click");
});

});

示例：http://jsfiddle.net/tvLt1r9h/2/

【讨论】：

【解决方案4】：

而且……还不算晚。如果您希望它从第一个 div 开始，您的 css 需要看起来像这样。

#box1 { 背景颜色：#333; } #box2 { 背景颜色：#333;左：-50%； } #box3 { 背景颜色：#333;左：150%； } #box4 { 背景颜色：#333;左：150%； } #box5 { 背景颜色：#333;左：150%； }

【讨论】：