Итерация над изображениями добавление, затем удаление CSS -эффекта ⇐ CSS

[Anonymous]

Как я мог достичь приведенного ниже эффекта на ряд категорий, в которых нет имени класса. далеко.

Discover our categories










Escort Services






For sale






Vehicles






Real estate






Services






Jobs






< /code>
Это класс, который я хотел бы итерации по изображениям, чтобы получить эффект в изображении GIF, которое я добавил выше. < /p>
.bumpy {
transform: translateY(-4px);
background: #f7f8fb;
border-radius: 10px;
box-shadow: 0 4px 5px rgb(0 0 0 / 20%);
}
< /code>
Ниже у меня есть до сих пор, но он поднимает все изображения вместе, это продолжается навсегда в цикле, как я хочу, но я хочу пройти через каждый элемент, а не все они вместе < /p>
$(function() {
var myFunction = function() {
const images = document.querySelectorAll(".catclass");

images.forEach((image) => {
setTimeout(function () {
image.classList.add("bumpy");
}, 1000);

setTimeout(function () {
image.classList.remove("bumpy");
}, 4000);
});
};

var timer = setInterval(myFunction, 1000);
});
< /code>
После того, как я общался, я получаю это < /p>
$(function() {
var myFunction = function() {

const images = document.querySelectorAll(".catclass");

images.forEach((image, index) => {

setTimeout(function () {

setTimeout(function () {
image.classList.add("bumpy");
}, 1000);

setTimeout(function () {
image.classList.remove("bumpy");
}, 2000);

},index * 3000)
});
};

var timer = setInterval(myFunction, 5000);
});
< /code>
Но теперь это поднимает THM в случайной последовательности Strangr. $(function() {
var myFunction = function() {

const images = document.querySelectorAll(".catclass");

images.forEach((image, index) => {

setTimeout(function () {

setTimeout(function () {
image.classList.add("bumpy");
}, 1000);

setTimeout(function () {
image.classList.remove("bumpy");
}, 2000);

},index * 1000)
});
};

var timer = setInterval(myFunction, 6000);
});


Подробнее здесь: https://stackoverflow.com/questions/797 ... css-effect