jquery animate scrollLeft

Question

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

User · Answer

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.

User · Answer

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

[jquery] jquery: animate scrollLeft

Examples related to jquery

Examples related to jquery-selectors