jquery анимировать дочерние элементы каждый с разной скоростью

88
8

Я использую функцию анимации jquery для перемещения блока в моем div. Базовая структура выглядит следующим образом:

<div class="content">
<div>block 1</div>
<div>block 2</div>
<div>block 3</div>
</div>

Мои js:

//main menu clicked:    
$('#nav').children().click(function(e){
e.preventDefault();
var current = $('.selected').index();
var clicked = $(this).index();
if(current != clicked){

if (current < clicked) {
clickedLeft = 1400
currentLeft = -1400
$('#content-'+clicked).css('left', clickedLeft);
} else {
clickedLeft = -1400
currentLeft = 1400
$('#content-'+clicked).css('left', clickedLeft);
}

$('#content-'+current).animate({left: currentLeft}, 1500, 'easeInOutSine', function(){ $('#content-'+current).hide(); });
$('#content-'+clicked).show().animate({left: 0}, 1500, 'easeInOutSine');

}
});

Когда я нажимаю ссылку на конкретное меню, соответствующий div будет перемещаться в центр, а div, который находится в центре, переместится в противоположную сторону. Все работает отлично, но у моего блока есть разные элементы, такие как img p li и т.д., Поэтому я хочу перемещать эти элементы с разной скоростью. Является ли это возможным? или я должен анимировать каждый элемент блоков отдельно? Я не могу дать анимацию каждому из элементов, потому что они извлекаются из db, поэтому не всегда появляются одни и те же элементы.

Живой пример: dida.uz

спросил(а) 2021-01-25T19:22:46+03:00 5 месяцев назад
1
Решение
125

Вы должны назначить разные анимации для div, но ранее, должны вычислить необходимое количество анимации за ограниченное время, что даст вам правильную скорость, тогда все анимации закончится в одно и то же время, что приведет к лучшему опыту.

Конечно, пример кода будет оценен.

ответил(а) 2021-01-25T19:22:46+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема