javascript - Move an element left on each click -
i think main question "how write this?" simple thing. every click css left property gets 500px taken off. (moved 500px left)
i having hard time variables , ... 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"); }); });
first of javascript (ecmascript) doesn't allow minus character '-' in variables names, can't use name belt-move
, instead should use underscore '_' (belt_move
) or camel case convention (beltmove
).
second: defining jquery animation need define property want change, in case 'left'.the 'swing' easing function default don't need pass it.
third: $(function() {...});
shorter version of $(document).ready(function() {...});
so final code should this:
$(function() { var beltmove = 500; var moveduration = 500; $(".next").click(function() { var jqbelt = $(".belt"); jqbelt.animate({left:"-="+beltmove}, moveduration); }); });
Comments
Post a Comment