将溢出的内容传输到另一个div - jquery

Question

堆栈溢出的第一个问题，尽管我已经使用了多年。

我试图将溢出的内容从一张幻灯片移动到下一张幻灯片（都是div），这些幻灯片放置在水平滚动div中。我已经成功地使一个开始在这一点 - 请使用以下代码

count = 0; 
$('.slide > .textOnly > .textAlign').each(function() { 
var nextSlide = count + 1; 
$(this).children('p').each(function() { 
    var currentEl = $(this); 
    if($(this).is(':in-viewport')) { 
     // Do Nothing 
    } else { 
     $('.slide' + nextSlide + ' > .textOnly > .textAlign').prepend($(this)); 
    } 
}); 
count++; 
}); 

唯一的问题是现在的内容被移动到最后一张幻灯片看到JS小提琴E- http://jsfiddle.net/N7X6W/3/。我假设，因为它正在考虑右边和左边。

我正在使用这个插件http://www.appelsiini.net/download/jquery.viewport.js，并试图取出左侧和右侧的计算，但没有效果。

任何帮助，将不胜感激。

Answer 1

就目前而言，如果屏幕上只有一个幻灯片，那么所有第二个屏幕的段落都会在第三个屏幕上结束。这似乎不符合任何目的。如果我正确理解你的意图，你真正关心的是：折叠下的（不是！：在视口中）。这很重要，因为它可以防止重定位后的相同商品重新定位（根据定义，视口不符合）除非这是因为它们也在该幻灯片的下方。

一旦我得到了那个工作，有一些细节。段落仍然会在中间被切断。问题不仅仅是“P：低于折叠”，因为如果第一行在视口中，那么否，P不低于。我想知道的是，如果整个事情是在视口，因为我知道高度/宽度约束真的“是在视口中段落的最后一个字母”。由于最后一个字母不是一个可以顺畅定位的元素，因此我只是在段落末尾创建一个空跨度。那么我问，如果它低于或低于折叠，这告诉我，如果该段被切断。

count = 0; 
$('.slide > .textOnly > .textAlign > p').append("<span class='trailer'></span>"); 
$('.slide > .textOnly > .textAlign').each(function() { 
    var nextSlide = $('.slide' + (++count) + ' > .textOnly > .textAlign'); 
    $($(this).children('p').filter(function() { 
     return $(".trailer", this).is(':below-the-fold') 
    }).get().reverse())  
     .each(function() { nextSlide.prepend($(this)); }); 
}); 

有效载荷： http://jsfiddle.net/zatz/N7X6W/6/

注意：通过P因子和预谋迭代，你改变他们的顺序！请参阅.reverse（）的使用。