JQuery: одушевленный 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

Вам понадобится что-то вроде этого:

<code>
$("#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);
});

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