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

Question

我正在尝试制作“循环菜单”或选择器。

我做了一个看起来像这样的jsfiddle。

我试过这个：

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

但它似乎不起作用。

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

如果可能的话，我喜欢不使用插件（例如 JQuery Cycle）

Answer 1

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

$("#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 对正确的语法非常敏感。