JQuery (animate)

[Yamaradg]

Всем привет. В 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. Прошу не судить строго мой код - поскольку, как уже сказал, не являюсь спецом в данном направлении..

Edited December 17, 2012 by Yamaradg

[stars]

я полагаю что правильно писать все таки "margin-left" ибо не какого 'marginLeft' в css нету и не было

[Yamaradg]

я полагаю что правильно писать все таки "margin-left" ибо не какого 'marginLeft' в css нету и не было

Вот страница с примером, где точно также всё прописано. (на сколько я понимаю в этом методе именно так всё и должно быть..)

http://jquery-docs.ru/Effects/animate/#source

P.S. Правда на счёт того что все работает именно через CSS я погарячился..

Если прописывать маргин для блока:

ul.blocks_my_slider li - то смещение происходит(правда для всех блоков - но все же оно имеет место быть..)

Но в случае, если именно через класс - отдельному списку прописывать отступ - то блоки почему то не смещаються так как хотелось бы.

(возможно это уже вопрос к верстальщикам больше.. Буду благодарен если кто разъяснить мне этот момент..)

Edited December 17, 2012 by Yamaradg

[Great Rash]

Скорее всего у вас просто кривая верстка. Прежде чем начинать писать плагин убедитесь, что у вас все нормально сверстано. Возможно что вы зря вообще выбрали margin-left, скорее всего вам лучше воспользоваться свойством left.

[hedgehog]

Анимируй враппер (ul), а не вложенные li, чтобы не было потом вопросов "почему в одном браузере так, а в другом - эдак". Кроме того, насколько я помню - анимация left/right кушает меньше ресурсов, чем margin.

[Yamaradg]

Скорее всего у вас просто кривая верстка. Прежде чем начинать писать плагин убедитесь, что у вас все нормально сверстано. Возможно что вы зря вообще выбрали margin-left, скорее всего вам лучше воспользоваться свойством left.

Анимируй враппер (ul), а не вложенные li, чтобы не было потом вопросов "почему в одном браузере так, а в другом - эдак". Кроме того, насколько я помню - анимация left/right кушает меньше ресурсов, чем margin.

Все тоже самое сделал для первого блока(Имею ввиду левый маргин. Сделал ему другую величину для наглядности.. ) - только отключил файл со скриптом..

http://webmaster.ayrveda.ru/slider/slider/slider.html

(Можете сравнить. 1-я и 2-я версии по разным адресам расположены..)

P.S. Cо свойством left тоже не работает.. (уже пробовал.)

Что касается анимации через ul - то мне хотелось бы для начала понять причину загвоздки именно в данной ситуации...

Edited December 17, 2012 by Yamaradg

[Yamaradg]

Анимируй враппер (ul), а не вложенные li, чтобы не было потом вопросов "почему в одном браузере так, а в другом - эдак". Кроме того, насколько я помню - анимация left/right кушает меньше ресурсов, чем margin.

Сделал, как вы говорите.

Пример:

Моя ссылка

Всё работает - Но! После перемещений каждой из каринок происходит мигание(на долю секунды..)

Как будто соседняя картинка проскакивает мимо..

Не знаете как с этим бороться можно?

[Great Rash]

Разбирайтесь.