jquery: animate scrollLeft

问题:

I'm quite new to jquery and can't seem to figure out why my code isn't working. I have a horizontal layout and want to use the scrollLeft() function (which works perfect with this code)

$("#next").click(function() {     currentElement = currentElement.next();     scrollTo(currentElement);     });  function scrollTo(element) {     $(window).scrollLeft(element.position().left); } 

But ideally, I would like to animate this so that when #next is clicked there is a nice animated effect to the scroll left function

$("#next").click(function() {     currentElement = currentElement.next();     scrollTo(currentElement);     });  function scrollTo(element) {     $(window).animate({scrollLeft: element.position().left}, 750); } 

But to no avail. What am I doing wrong?

回答1:

You'll want something like this:

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

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

回答2:

First off I should point out that css animations would probably work best if you are doing this a lot but I ended getting the desired effect by wrapping .scrollLeft inside .animate

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

The second parameter is speed, and you can also add a third parameter if you are using smooth scrolling of some sort.

文章来源: jquery: animate scrollLeft