每次单击将元素向左移动

Question

I think My main question is "how do I write this?" Its a simple thing. for every click the css left property gets 500px taken off. (moved 500px to the left)

I am having a hard time with the variables and just ... I don't know.

$(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

First of all JavaScript (ECMAScript) doesn't allow minus character '-' in variables names, so you can't use the name belt-move , instead you should use underscore '_' ( belt_move ) or camel case convention ( beltMove ).

Second: Defining jQuery animation you need to define what property you want to change, in this case 'left'.The 'swing' easing function is default so you don't need to pass it.

Third: $(function() {...}); is shorter version of $(document).ready(function() {...});

So the final code should look like this:

$(function() {
    var beltMove = 500;
    var moveDuration = 500;
    $(".next").click(function() {
        var jqBelt = $(".belt");
        jqBelt.animate({left:"-="+beltMove}, moveDuration);
    });
});

Answer 2

try this.....

$(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

Change this line: var belt-ammount = $(".belt").css('left'); to var belt-ammount = parseInt($(".belt").css('left')); . The reason is that .css will return with px at the end of the pixel, eg `500px'.

Answer 4

You don't need to parse out the left property or do the subtracting yourself - the animate function has this capability built in:

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

See http://www.jsfiddle.net/ExRR7/ for a simple demo of this