Animation "blinds". Code can be shorter?

Question

Sorry, I'm new to javascript :)

I have 18 identical divs that I want to animate. By mousedown on the #butone all blocks are shifted to the left (the effect of the blinds), by mousedown on the #buttwo, they return to their original position.

Here is code that doesn't work ...
write, please, what is the error =(

<!--
var artw = $('#primer div');
$('#butone').mousedown(function(){
$.each([-17,-14,-11,-8,-5,-2,1,4,7,10,13,16,19,22,25,28,31,34], function(index,value){
artw.eq(index).animate({left:value}, 2000);
});
-->
Here is an example of what I would like to do

https://code.sololearn.com/WjAxTJW6EXYA/?ref=app

Answer 1

You have some syntax errors. Look closely at your code and you'll see that you didn't close the .bind() or the function body } that is passed in. Also, you're missing the opening [ bracket to the array passed into the .each(). There may be others, but those are what I spotted at a glance.

Also, I think I need to explain the use of strings I was trying to explain before a bit better. If you're simply using an integer value as a location then you won't need to use strings. If you do use a string then you need to also suffix the size type (px, em, %, etc) with the exception of 0. So in this case 10 is the same as '10', but if you wanted to subtract 10px from the current value and set that as the new value you would use '-=10px', likewise to add 10px to the current value use '+=10px'. I was basing this information on the array you're using in the .each() of your post, not the code you linked to. Since it looks like you're just using integer values '=0' is wrong and you can just use 0 or '0' in your array. So the code would look like;

$('#butone').bind('touchstart mousedown', function() {
$.each([0,2,4,6,8,10,12,14,16,234,236,238,240,242,244,246,248,250], function(index, value) {
artw.eq(index).animate({left:value}, 2000);
});
});

Answer 2

Instead of using .mousedown() .mouseup() which will only work with a computer mouse click try using .bind('touchstart mousedown', function() {...});
This will allow your code to work with touch screen devices as well, such as smart phones and tablets etc.
Also try changing the value array to strings instead of integer values and using something like:
["-=17px", "-=14px", ...]
Of course the use of this will depend on exactly what you're trying to do with the animation of your elements. You'll need to experiment a bit to see how they move. Other than this I don't see an issue with your code.

Answer 3

K, looks like you fixed your syntax errors. So if you just remove all the = from the array it should work.

Answer 4

super! everything is working! thank you very much for your patience :)

Answer 5

Yup, np. Nice work BTW! Keep it up you're doing awesome.

Answer 6

I don't see any change to the code.

Answer 7

I probably do something wrong, but it gives an error and the animation still does not want to work..(

code:
https://code.sololearn.com/WjAxTJW6EXYA/?ref=app

Answer 8

sorry! I forgot to save it))))

here:
https://code.sololearn.com/WjAxTJW6EXYA/?ref=app

Answer 9

missed a few signs ... the error no longer outputs, but the animation does not work