Здравствуйте. В 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 end...

Событие повесил(в данном варианте) только на одну кнопку(левую верхнюю. Чёрного цвета..)
В данной версии плагина эффект маргина(левого) почему то пропадает. То есть двигаться в лево блок должен дальше, пикселей на 15-20-ть! (Пример того, как это должно выглядеть, можно увидеть по следующей, расположенной далее, ссылке.) — но этого почему то не происходит..
(пока не знаю что с этим делать.)

Позже пошёл другим путём и решил попробовать двигать весь блок

    .
    Но! Появился другой момент, связанным с тем что во время перемещения картинок — между ними как бы проскакивает(мигает на долю секунды) картинка, которая будет идти следующей.
    Пример можно увидеть здесь:
    http://webmaster.ayrveda.ru/my_slider/slider.html
    (Плагин построен таким образом что блок с картинкой(тот, который невидимый, пассивный) с одной стороны(блока
      ) исчезает, а с другой появляется. Именно этот блок и проскакивает между картинками..)
      Пробовал менять св-ва картинкам(и родительским блокам
    • ) z-index, display:none, background-color:transparent, visibility:hidden и т.п. — но всё безрезультатно..
      Чтение документации о данном методе(animate) + поиски в гугле — так же ни к чему ни привели..

      P.S. Буду благодарен за помощь..

Оценить:|
  
Комментировать
Раздел: JavaScript    
Просмотров: 1283

Оставить комментарий