jquery：animate scrollLeft

Question

我对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);
}

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

Answer 1

你会想要这样的东西：

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

我认为这应该有用，它是从scrollTop函数中采用的。

Answer 2

首先我应该指出，如果你这么做很多，css动画可能会效果最好但是我通过将.scrollLeft包装在里面来获得所需的效果.animate

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

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

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

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