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