Всем привет. В JQ я не силен и в последнее время пытаюсь осваивать данное направление..
При написании примитивного плагина(слайдера) столкнулься с непониманием того, как именно работает метод 'animate' .
Имеется такая страница:
http://webmaster.ayrveda.ru/slider/slider.html
JS на ней выглядит вот так:
$(document).ready(function() {
$('.my_slider span.my_slider_left_arrow').click(function myClick(){
$('ul.blocks_my_slider li:first-child').animate({'marginLeft':'-535px'},800).animate({'marginLeft':'-493px'},300).animate({'marginLeft':'-500px'},300,function(){
$(this).css({'margin-left':'0px'});
});
mySetTimeOut();
});
function MyBlockDelete(){
$('ul.blocks_my_slider li:first-child').detach().appendTo("ul.blocks_my_slider");
}
function mySetTimeOut(){
window.setTimeout(MyBlockDelete, 1400);
}
}); // Конец ready...
На данный момент событие повесил только на одну кнопку(левую верхнюю. Чёрного цвета..)
Все эти картинки(при клике) должны отъезжать в лево на 535px - НО! реальное смещение не дотягивает пикселей на 20-ть!(если на глаз смотреть..)
На сколько я понимаю,что то не правильно мною реализовано в методе Аnimate, поскольку такой же маргин через СSS осуществляется без проблем!
Вопрос:
В чём моя ошибка и почему эти маргины не срабатывают т.к. мне этого хотелось бы?
(Попытки разобраться в этом самостоятельно(гугл + чтение документации с примерами) ни к чему ни привели..)
P.S. Прошу не судить строго мой код - поскольку, как уже сказал, не являюсь спецом в данном направлении..