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

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