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?
This question is related to
jquery
jquery-selectors
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.
Source: Stackoverflow.com