动画滚动很buggy

所以我一直试图弄清楚这一点，似乎无法得到它。动画滚动很buggy

我使用由圆圈组成的导航（请参阅下面的网站），当用户点击一个导航时，它会将他/她转发到相应的幻灯片。

当您单击时，它有时会一直滑回窗口的开始处（margin-left = 0）。如果它一开始没有这样做，只需点击一下或两个，你最终会看到它。

http://dan.stargroupdev.com/

下面是这车的代码：

$("#footer-slidenav .links a").click(function() { 
    // Get nav index 
    var slidenum = $(this).attr("id").slice(3); 
    // Setup slide selector with string to avoid issues 
    var slidetext = ".slide:eq(" + slidenum + ")"; 
    slidenum = $(slidetext).offset().left; 
    console.log("Top: " + slidenum); 
    var offset2 = 0; 
    // Find window offset to center slide if screen is bigger than 1000px (size of one slide) 
    if (($(window).width() - 1000)/2 > 0) { 
    offset2 = ($(window).width() - 1000)/2; 
    } 
    // Slide window to slide # that was clicked 
    $("html:not(:animated), body:not(:animated)").animate({ 
    scrollLeft: slidenum 
    }, 1000, function() { 
    console.log("Middle: " + slidenum); 
    // Callback to center slide and give a nice little animated touch 
    slidenum = $(slidetext).offset().left; 
    console.log("Bottom: " + slidenum); 
    $("html:not(:animated), body:not(:animated)").animate({ 
     scrollLeft: (slidenum - offset2) 
    }, "fast"); 
    }); 
    return false; 
});

我尝试之类的东西$("html:not(:animated), body:not(:animated)")与其他几个类似的可能的解决方案，但错误依然存在。

任何建议将是伟大的，我很乐意接受任何想法，你们可能有。

谢谢。

来源

2011-07-15 switz

检查你的变量slidenum是不是在改变它不应该改变（范围）...做一些像console.log（“A - ”+ slidenum）;的console.log（ “B - ” + slidenum）;每次您将值设置为slidenum变量后。 – Tank

我添加了上面的代码，所以你可以看看控制台。由于某种原因，这似乎是两次调用回调。 – switz

双重回调被称为是因为你为body和html设置了动画（当你选择** html，body **时，它选择了两个元素而不是一个）。两个动画立刻就是邪恶的。 – yoavmatchulsky

原来我在另一个JS文件中剩下一段代码。对不起浪费你的时间，这就是为什么它变得混乱。

虽然我欣赏你的答案。

来源

2011-07-22 16:14:07 switz

伊利诺伊州提出了一个全新的解决方案（主要是新的）

$("#footer-slidenav .links a").click(function() { 
    var slidenum = $(this).attr("id").slice(3); 
    var slidetext = ".slide:eq(" + slidenum + ")"; 

    offset = $(slidetext).position().left; 
    console.log(offset); 

    $("body").animate({ 
     scrollLeft: offset 
    }); 
});

你能不能给它一个试试？

来源

2011-07-15 19:37:59 Lourens

我会在星期一尝试它，但我真的不知道除了body，而不是'body，html'这个事实之外，它有什么不同，除此之外我已经尝试了一千次以上。 – switz

另一件事是我删除了回调动画 – Lourens

我试过了。现在它只是将它拍回到开始（回调会使它至少在开始之后起作用）。在控制台中，数字仍然是正确的。 – switz

我的建议是测试网站没有front的body。脚本http://dan.stargroupdev.com/sites/all/themes/starsite/js/starsite.js使用这个类的结果来创建我认为不想要的行为。如果我用萤火虫将它移除，它对我来说可以。检查并提供反馈，看看是否属实。

来源

2011-07-19 21:12:52 Sotiris

首先我可以建议Arial Flesler的scrollTo插件？它太棒了，像魅力一样工作。

您可以使用偏移量居中最终位置。

如果你想要某种缓动，那么你可以使用它们使动画看起来更自然自然。那么弹性动画呢？

我一直在使用这个插件超过一年，没有发现任何问题。

另外，请记住.stop()滚动/动画元素。

来源

2011-07-21 11:43:04

动画滚动很buggy

回答

相关问题