Всем привет ! чет не могу разобраться, казалось бы с простой задачей...
к примеру есть список
<ul class="miniature">
<li class="min_1">
....
</li>
.....
<li class="min_XXX">
......
</li>
</ul>
в css задано примерно так:
(для тестов пока всё примерно так)
.slider .miniature {
background: green;
width: 90%;
height: 180%;
margin: 0 auto;
position: absolute;
overflow: hidden;
left: 5%;
top:-35%;
box-sizing: border-box;
}
.slider .miniature li {
position: absolute;
height: 70%;
width: 25%;
background: gray;
top: 15%;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
box-sizing: border-box;
}
.slider .miniature li:nth-child(1) {
left: 0%;
}
.slider .miniature li:nth-child(2) {
left: 25%;
}
.slider .miniature li:nth-child(3) {
left: 50%;
}
.slider .miniature li:nth-child(4) {
left: 75%;
}
.slider .miniature li:nth-child(5) {
left: 100%;
}
теперь я хочу чтобы всё это двигалось
при нажатии на лево, нужно сдвинуть на 25%
при нажатии в право нужно сдвинуть так же на 25%
все элементы списка...
если допустим рассчитываю расстояние на которое надо сдвинуть , то всё разумеется двигается
var a = $('.slider').children('.miniature').children(".min_2").css('left');
a = a.substr(0, a.length-2);
var b = $('.slider').children('.miniature').children(".min_1").css('left');
b = b.substr(0, b.length-2);
margin = a - b;
ну и соответственно двигаю
if (length > 4) {
for (i = 1; i<= length; i++) {
if (dest == 'Left') object.children('.miniature').children('.min_'+i+'').animate({'left': '-='+margin+'px'}, 'fast' );}
else if (dest == 'Right') object.children('.miniature').children('.min_'+i+'').animate({'left': '+='+margin+'px'}, 'fast');}
}
всё супер всё сдвинулось... но если изменяю ширину окна браузера, то естественно всё смещается, так как всё теперь задано не в процентах...
теперь если всё двигаю в процентах , выглядит так
var width = object.children(".miniature").css('width');
width = width.substr(0, width.length-2);
var m_per = (margin * 100) / width;
var length = object.children('.miniature').children().length;
if (length > 4) {
for (i = 1; i<= length; i++) {
pos = object.children('.miniature').children('.min_'+i+'').css('left');
pos = pos.substr(0, pos.length-2);
var per = (pos * 100) / width;
//alert(per);
var m = per - m_per;
//alert(m);
if (dest == 'Left') object.children('.miniature').children('.min_'+i+'').animate({'left': ''+m+'%'}, 'fast', function() {
});
всё двигается и после изменения размера окна браузера, всё остаётся на нужных местах...
но почему то перед тем как всё начинает перемещаться... все объекты двигаются немного вправо и потом едут на свои места, получается что то типа гармошки... )))
да и если вызываю callback функцию у анимации , она почему то вызывается почти сразу после начала анимации... а не после как это должно быть...
так же пользовался этим (уже делал тоже самое в других проектах), чтобы до окончания анимации нельзя было ещё раз её запустить... , почему то тоже не срабатывает, точнее работает, но не весь период выполнения анимации...
//if (object.children(".miniature").children('li').is(':animated')) {return false;}
Понаписал кучу... ) может кто то поможет , хотя бы в нужную сторону толкнуть, буду очень признателен )))
сильно не бейте, я начинающий )))
