При написании плагина(слайдера) столкнулся с непониманием того, как именно работает метод '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...
Событие повесил(в данном варианте) только на одну кнопку(левую верхнюю. Чёрного цвета..)
В данной версии плагина эффект маргина(левого) почему то пропадает. То есть двигаться в лево блок должен дальше, пикселей на 15-20-ть! (Пример того, как это должно выглядеть, можно увидеть по следующей, расположенной далее, ссылке.) - но этого почему то не происходит..
(пока не знаю что с этим делать.)
Позже пошёл другим путём и решил попробовать двигать весь блок <ul>.
Но! Появился другой момент, связанным с тем что во время перемещения картинок - между ними как бы проскакивает(мигает на долю секунды) картинка, которая будет идти следующей.
Пример можно увидеть здесь:
http://webmaster.ayrveda.ru/my_slider/slider.html
(Плагин построен таким образом что блок с картинкой(тот, который невидимый, пассивный) с одной стороны(блока <ul>) исчезает, а с другой появляется. Именно этот блок и проскакивает между картинками..)
Пробовал менять св-ва картинкам(и родительским блокам <li>) z-index, display:none, background-color:transparent, visibility:hidden и т.п. - но всё безрезультатно..
Чтение документации о данном методе(animate) + поиски в гугле - так же ни к чему ни привели..
P.S. Прошу не судить строго мой код - поскольку, как уже сказал, не являюсь спецом в данном направлении.. :)