Jquery: анимация scrollLeft

Я новичок в 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);
}

Но безрезультатно. Что я делаю неправильно?

Ответ 1

Вам нужно что-то вроде этого:


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

I believe this should work, it adopted from a scrollTop function.

Ответ 2

Прежде всего, я должен отметить, что анимация css, вероятно, будет работать лучше всего, если вы делаете это много, но я закончил получать желаемый эффект, обернув .scrollLeft внутри .animate

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

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

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

Второй параметр - это скорость, и вы также можете добавить третий параметр, если вы используете гладкую прокрутку какого-то типа.