Question

我认为我的主要问题是“我该怎么写这个？” 这很简单。对于每次点击，css left属性都会被取消500px。（向左移动500px）

我对变量很难，只是......我不知道。

$(document).ready(function() { 

    var belt-move = 500;
    var belt-ammount = $(".belt").css('left');
    belt-move -=  belt-ammount;


     $(".next").click(function() {
        $(".belt").animate(belt-move, 500, "swing");
     });
});

Answer 1

首先，JavaScript（ECMAScript）不允许在变量名称中使用减号字符' - '，因此您不能使用名称belt-move，而应使用下划线'_'（{{1} }）或驼峰案例约定（belt_move）。

第二：定义jQuery动画你需要定义你想要改变的属性，在本例中为'left'。'swing'缓动函数是默认的，所以你不需要传递它。

第三：beltMove是$(function() {...});

的缩短版本

所以最终的代码应如下所示：

$(document).ready(function() {...});

Answer 2

试试这个......

$(document).ready(function() { 

    var belt-move = 500;
     $(".next").click(function() {
         var belt-ammount = parseInt($(".belt").css('left'));
          belt-move =  belt-ammount-belt-move;
        $(".belt").animate(belt-move, 500, "swing");
     });
});

Answer 3

将此行：var belt-ammount = $(".belt").css('left');更改为var belt-ammount = parseInt($(".belt").css('left'));。原因是.css将在像素的末尾以px返回，例如`500像素”。

Answer 4

您无需解析left属性或自行减去 - animate函数内置了此功能：

 $(".next").click(function() {
    $(".belt").animate('-=500px', 500, "swing");
 });

有关此

的简单演示，请参阅http://www.jsfiddle.net/ExRR7/

每次单击时向左移动一个元素

4 个答案: