jquery：动画滚动左答案

【问题标题】：jquery: animate scrollLeftjquery：动画滚动左
【发布时间】：2011-07-29 14:58:13
【问题描述】：

我对 jquery 很陌生，似乎无法弄清楚为什么我的代码不起作用。我有一个水平布局并想使用 scrollLeft() 函数（与此代码完美配合）

$("#next").click(function() {
    currentElement = currentElement.next();
    scrollTo(currentElement);    
});

function scrollTo(element) {
    $(window).scrollLeft(element.position().left);
}

但理想情况下，我想对此进行动画处理，以便在单击#next 时向左滚动功能产生很好的动画效果

$("#next").click(function() {
    currentElement = currentElement.next();
    scrollTo(currentElement);    
});

function scrollTo(element) {
    $(window).animate({scrollLeft: element.position().left}, 750);
}

但无济于事。我做错了什么？

【问题讨论】：

scrollLeft() 是一个 jQuery 函数，它只适用于 DOM 元素。 animate() 只能作用于 DOM 样式属性，不能作用于函数。
在我的情况下，我发现一些固定元素覆盖了 ul 的两个站点，并且误认为 ul 溢出（实际上 ul 没有溢出）。所以我滚动了很多次，它没有工作。我误认为 ul 是溢出的原因不是。

标签： jquery jquery-selectors

【解决方案1】：

你会想要这样的东西：


$("#next").click(function(){
      var currentElement = currentElement.next();
      $('html, body').animate({scrollLeft: $(currentElement).offset().left}, 800);
      return false;
   });

我相信这应该可行，它是从scrollTop 函数中采用的。

【讨论】：

似乎什么都没有发生。我认为这是因为您取出了选择下一个元素的 scrollTo 函数。我拥有的是一个带有多个 li 的巨大 ul，水平主题有两个按钮#previous 和 #next，它们选择 ul 中的下一个或上一个项目，我想要的是很好地为导航设置动画。这是我最初的问题：stackoverflow.com/questions/6867914/jquery-jump-to-next-element
理论上你应该能够组合这两个函数，因为你运行.click 函数但是你在其中调用另一个函数。也许尝试$(window) 而不是$('html, body')。
对，但我的意思是我认为（我很可能是错的）你没有在上面的代码中包含 scrollTo 函数，所以它不是函数中的函数, 即使使用 $(window)
scrollTo 功能代码变为$('html, body').animate({scrollLeft: $(currentElement).offset().left}, 800);，将您的scrollTo 代码原样放入，它将是$(window).animate({scrollLeft: $(currentElement).position().left}, 750);。但是，您可能想尝试的另一件事是将scrollTo 功能代码中的element 部分转换为$(element)，然后看看是否可行。
你为什么返回 false？

【解决方案2】：

首先我应该指出，如果你经常这样做，css 动画可能效果最好，但我最终通过将 .scrollLeft 包装在 .animate 中来获得所需的效果

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

    $('.swipeBox').animate( { scrollLeft: '+=460' }, 1000);
});

$('.swipeLeft').click(function()
{
    $('.swipeBox').animate( { scrollLeft: '-=460' }, 1000);
});

第二个参数是速度，如果您使用某种平滑滚动，也可以添加第三个参数。

【讨论】：

什么样的css动画？向左滚动不是 CSS 属性
滚动到特定位置（即const left = 200;），如下所示：$(element).animate( { scrollLeft: left }, 1000);