jQuery:动画滚动到下一个仅工作一次

用户1374796

我有一个简单的jQuery函数,单击的每个实例.load-more将在的下一个实例中消失.inside并滚动到它。第一次.load-more单击可以正常工作,将您向下滚动到.inside成功,但是在下.load-more一个实例中单击下一个会逐渐消失,.inside但是由于某种原因未滚动到该位置,因此不太确定为什么?

jsFiddle演示:http : //jsfiddle.net/neal_fletcher/K9nMS/5/

jQuery:

$(document).ready(function () {

    var divs = $(".wrap > .div");
    for (var i = 0; i < divs.length; i += 3) {
        divs.slice(i, i + 3).wrapAll("<div class='inside'><div class='new'></div></div>");
    }

});


$(document).ready(function () {

    Resize();
});

$(window).resize(function () {
    Resize();
});

function Resize() {
    var windowHeight = $(window).height() + 'px';
    $('.inside').css('height', windowHeight);
}


$(document).ready(function () {

    $(".new .div:last-child").after("<span class='load-more'>More?</span>");
    $('.inside').hide().filter(":first-child").show();

    $('.load-more').click(function () {
        var nextinside = $(this).parent().parent('.inside').nextAll(".inside:first"),
            nextloadmore = $(this).nextAll(".load-more:first");
        $(this).hide();
        nextinside.fadeIn();
        nextloadmore.fadeIn();
        $('.wrap').animate({
            scrollTop: nextinside.offset().top - 0
        }, 700);
    });
});

任何建议或解决方案将不胜感激!

浮士德

您需要将每个连续集合的滚动顶部位置更改为集合索引的倍数:

scrollTop: nextinside.index() * nextinside.offset().top

我在这里为您工作:http : //jsfiddle.net/K9nMS/7/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用jQuery滚动到下一个DIV

来自分类Dev

使用jQuery滚动到下一个DIV

来自分类Dev

滚动到下一个课程元素

来自分类Dev

滚动到正文上的下一个div

来自分类Dev

滚动到下一个 div

来自分类Dev

Bootstrap向导的下一个事件仅起作用一次

来自分类Dev

Bootstrap向导的下一个事件仅起作用一次

来自分类Dev

滚动到鼠标滚轮jQuery上的下一个div

来自分类Dev

平滑滚动到下一个类元素jQuery

来自分类Dev

jQuery / JS –单击博客图像滚动到下一个博客项目

来自分类Dev

JQuery 滚动到下一个非同级不起作用

来自分类Dev

jQuery-通过KeyUp / KeyDown滚动到下一个/上一个部分

来自分类Dev

jQuery-通过KeyUp / KeyDown滚动到下一个/上一个部分

来自分类Dev

如何仅滚动一次运行jQuery动画?

来自分类Dev

如何在循环中仅显示div一次,并且在div内部仅显示一次的下一个div显示

来自分类Dev

jQuery动画无限循环与下一个

来自分类Dev

jQuery滚动播放下一个视频

来自分类Dev

RewriteRule第一次重写正在工作,但是下一个重写不起作用

来自分类Dev

使用带有Prev和Next图标的Jquery滚动到下一个Div

来自分类Dev

滚动到下一个元素,而是滚动回到第一个元素

来自分类Dev

jQuery UI Datepicker,从一个日历移动到下一个日历?

来自分类Dev

如何为滚动到一个点以下创造条件,并仅触发该函数一次。而不是每次您滚动到该点以下

来自分类Dev

滑动到下一个活动动画样式帮助:: Android

来自分类Dev

按'j'时滚动到下一个<div>

来自分类Dev

iCarousel,如何以编程方式转到/滚动到下一个项目?

来自分类Dev

如何滚动到相册上的下一个缩略图

来自分类Dev

滚动到具有相同父类的下一个元素

来自分类Dev

在 TabBarView 中颤动 PageView:滚动到页面末尾的下一个选项卡

来自分类Dev

jQuery滚动带图像按钮的下一个/上一个Div

Related 相关文章

  1. 1

    使用jQuery滚动到下一个DIV

  2. 2

    使用jQuery滚动到下一个DIV

  3. 3

    滚动到下一个课程元素

  4. 4

    滚动到正文上的下一个div

  5. 5

    滚动到下一个 div

  6. 6

    Bootstrap向导的下一个事件仅起作用一次

  7. 7

    Bootstrap向导的下一个事件仅起作用一次

  8. 8

    滚动到鼠标滚轮jQuery上的下一个div

  9. 9

    平滑滚动到下一个类元素jQuery

  10. 10

    jQuery / JS –单击博客图像滚动到下一个博客项目

  11. 11

    JQuery 滚动到下一个非同级不起作用

  12. 12

    jQuery-通过KeyUp / KeyDown滚动到下一个/上一个部分

  13. 13

    jQuery-通过KeyUp / KeyDown滚动到下一个/上一个部分

  14. 14

    如何仅滚动一次运行jQuery动画?

  15. 15

    如何在循环中仅显示div一次,并且在div内部仅显示一次的下一个div显示

  16. 16

    jQuery动画无限循环与下一个

  17. 17

    jQuery滚动播放下一个视频

  18. 18

    RewriteRule第一次重写正在工作,但是下一个重写不起作用

  19. 19

    使用带有Prev和Next图标的Jquery滚动到下一个Div

  20. 20

    滚动到下一个元素,而是滚动回到第一个元素

  21. 21

    jQuery UI Datepicker,从一个日历移动到下一个日历?

  22. 22

    如何为滚动到一个点以下创造条件,并仅触发该函数一次。而不是每次您滚动到该点以下

  23. 23

    滑动到下一个活动动画样式帮助:: Android

  24. 24

    按'j'时滚动到下一个<div>

  25. 25

    iCarousel,如何以编程方式转到/滚动到下一个项目?

  26. 26

    如何滚动到相册上的下一个缩略图

  27. 27

    滚动到具有相同父类的下一个元素

  28. 28

    在 TabBarView 中颤动 PageView:滚动到页面末尾的下一个选项卡

  29. 29

    jQuery滚动带图像按钮的下一个/上一个Div

热门标签

归档