Цепочка jQuery .animate/.each
-
18-09-2019 - |
Вопрос
Я пытаюсь объединить совпадения примерно так:
$(".item").each(function(i) {
//animation here
});
с встроенной функцией цепочки jQuery, которая заставляет анимацию ждать, пока не завершится предыдущая анимация, например:
$(".item").each(function(i) {
$(this).animate({marginLeft:"0"}, 60);
});
А затем активируйте функцию .load после завершения анимации.По сути, я хочу убрать четыре элемента по порядку [один за другим, а не все сразу], а затем загрузить четыре новых элемента в один и тот же элемент div, заменив первые четыре.
Как я могу сделать это многоразовым/переменным способом?
Решение 3
$("#more:not(.disabled)").live("click", function(event) {
event.preventDefault();
var urlPieces = (event.target.href).split("/");
var nextURL = urlPieces[urlPieces.length - 2] + "/" + urlPieces[urlPieces.length - 1];
var items = $(".item");
var itemCount = items.length;
items.each(function(i) {
var passthru = this;
window.setTimeout(function() {
$(passthru).animate({opacity:"0"}, 60, function() {
if (i == itemCount - 1) {
$("#browse").load(nextURL + " .item, #controls", fadeInNew);
}
});
}, 60*i);
});
});
FadeInNew обрабатывает новое постепенное появление в другом месте, но это было то, что я более или менее искал, с небольшим количеством дополнительного кода вокруг него, чтобы, возможно, пролить некоторый свет на то, что происходит (есть следующая стрелка с URL-адресом в ее href , если JavaScript включен, мне нужен URL-адрес следующей страницы относительно текущей, если он выключен, он следует за этим URL-адресом как href и загружает новую страницу с тем же содержимым, за исключением новых элементов, которые будут были $.loaded.
Другие советы
Как насчет проверки того, является ли элемент последним, а затем добавления обратного вызова?
$(".item").each(function(i, elem) {
var callback = $(elem).is(':last') ? function() {
//dosomething
} : function(){};
$(this).animate({marginLeft:"0"}, {duration: 60, complete: callback);
});
Просто укажите обратный вызов для анимации и отследите, сколько элементов было затемнено.Затем, когда они все будут готовы, удалите их и добавьте новые.
var items = $('.item');
var parent = items.parent();
var itemCount = items.length;
items.each(function()
{
$(this).fadeOut('medium', function()
{
itemCount--;
if (itemCount == 0)
{
// Remove the items and add the new ones.
items.remove();
parent.append('...')
}
});
});
Просто обновите задержку следующим образом:
$(".item").each(function(i) {
$(this).delay(200*i).animate({marginLeft:"0"}, 60);
});
ul li.item {
margin-left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="item">List 1</li>
<li class="item">List 2</li>
<li class="item">List 3</li>
<li class="item">List 4</li>
<li class="item">List 5</li>
<li class="item">List 6</li>
</ul>
Мой вклад, основанный на @Дэвид-Хеллсинг алгоритм :)
function pop_in(array_elem, index) {
$(array_elem[index]).animate({
width: 'toggle',
height: 'toggle'
}, 700)// callback will be a promise
.promise()
.then(() => {
$(array_elem[index]).css({visibility: 'hidden'}); //hide after reduce size
if(index > 0)
pop_in(array_elem, --index) //recursive call
else
console.log("Animation finished. Execute another function from here.");
});
}
const items_menu = $(".item");
pop_in(items_menu, items_menu.length-1); //start from last to first element
Обратите внимание, что вы можете изменить свойства ширины и высоты в соответствии со своими целями.