jquery - 带有下一个和上一个按钮的可滑动菜单循环

我正在尝试制作“自行车菜单”或选择器。

我做了一个看起来像this.的jsfiddle

我已经试过了：

$("#prev").click(function(){
      $('#routesheader').animate({
          left: '200px';
      });
      $('#routesheader').toggle();
});
$("#next").click(function(){
      $('#routesheader').animate({
          left: '-200px';
      });
      $('#routesheader').toggle();
});

但它似乎不起作用。

我希望列表根据所按的按钮向左和向右移动，从而显示下一个/上一个选择

如果可能的话，id希望不使用插件（例如JQuery Cycle）

最佳答案

您的问题是动画括号中的分号。那是不正确的语法。正确的语法如下：

$("#prev").click(function(){
    $('#routesheader').animate({left:'200px'},500);
    $('#routesheader').toggle();
});
$("#next").click(function(){
    $('#routesheader').animate({left:'-200px'},500);
    $('#routesheader').toggle();
});

如果您需要多个属性进行动画处理，请按照以下方式进行划分：

$("#prev").click(function(){
    $('#routesheader').animate({
        left:'200px',
        attr:'value',
        attr:'value'
    },500);

您必须使用逗号，但不要在最后一个属性上使用逗号。 Javascript对正确的语法非常敏感。