Кнопки Next/Prev onClick позволяют перейти к следующей и предыдущей <td>

Question

Я все еще изучаю JavaScript и мне нужна помощь. Я делаю следующие и предыдущие кнопки, которые вызывают прокрутку к следующему или предыдущему <td>на странице. Я пытаюсь реализовать это в существующей структуре сайта virb. разметка выглядит так:

div id="next">next</div><div id="prev">prev</div>
<table>
<tr><td>code that includes img</td></tr>
<tr><td>code that includes img</td></tr>
<tr><td>code that includes img</td></tr>
<tr><td>code that includes img</td></tr>
<tr><td>code that includes img</td></tr>
</table>

Вот скрипт, с которым я работаю:

jQuery.easing.def = "easeInOutQuad";
    $("#next").click(function (){
        //$(this).animate(function(){
            $('html, body').animate({
                scrollLeft: $("td").next.offset().left
                 }, 600);
        //});

    });​

Вот jsFiddle, над которым я работаю

Answer 1

Следующее отслеживает ваш текущий элемент для просмотра. Вам понадобится аналогичный значок, чтобы уменьшить индекс в вашей обычной программе.

Вам также может понадобиться добавить задержку или отключение события, чтобы множественные клики во время анимации не принимали значение currentIdx выше или ниже диапазона элементов, которые вы должны показать.

var currentIdx = 0;
jQuery.easing.def = "easeInOutQuad";
        $("#next").click(function (){

            //$(this).animate(function(){
                $('html, body').animate({
                    scrollLeft: $("td").eq(currentIdx).offset().left
                     }, 600);
                currentIdx++;     
            //});
        });

Answer 2

Пытаться:

    scrollLeft: $("td").next().offset().left