Анимация карточки товара FadeIn в jQuery работает некорректно
Я делаю фильтрацию карточек товаров с помощью ajax и столкнулся с небольшой проблемой. Когда гость сайта переходит на страницу со всеми карточками товаров, карточки должны появляться одна за другой с плавной анимацией. Я сделал карточки продуктов на этой странице с помощью карточек Bootstrap 5, а также сделал запрос ajax, чтобы показать эти карточки. Проблема в том, что когда гость заходит на страницу с карточками товаров, все карточки показываются одновременно на 0,5 сек, а потом исчезают и начинается анимация с отображением карточек. Я не могу понять, почему это происходит.
Этот код для карт:
<div class = "col">
<div class = "card border-0 bg-transparent">
<div class = "ratio" style = "--bs-aspect-ratio: 62.5%;">
<?php echo get_the_post_thumbnail( $id, 'full', array('class' => 'img-fluid') ); ?>
</div>
<a href = "<?php the_permalink(); ?>" class = "stretched-link">
<div class = "card-img-overlay"></div>
</a>
<div class = "card-text w-100 ps-lg-4 ps-3 fadeIn-bottom">
<h5><?php the_title(); ?></h5>
<h4 class = "text-uppercase fw-bold mt-lg-3 mt-1"><?php echo (get_post_meta( get_the_ID(), 'company_meta_key', 1 )); ?></h4>
</div>
</div>
</div>А это мой jQuery для анимации:
$(document).ready(function() {
$('.card').each(function(i) {
// 'i' stands for index of each element
$(this).hide().delay(i * 300).fadeIn(600);
});
});
// ajax запрос
$('.cat-list_item').on('click', function(e) {
e.preventDefault();
$('.cat-list_item').removeClass('active');
$(this).addClass('active');
$.ajax({
type: 'POST',
url: '/wp-admin/admin-ajax.php',
dataType: 'html',
data: {
action: 'filter_projects',
category: $(this).data('slug'),
},
success: function(res) {
$('.post-filter').html(res);
$('.card').each(function(i) {
// 'i' stands for index of each element
$(this).hide().delay(i * 300).fadeIn(600);
});
}
})
});Может ли эта анимация конфликтовать с анимацией, когда пользователь наводит курсор на эти карты?
Ответы 1
Покопавшись в jQuery FadeIn, я нашел решение. Необходимо добавить display:none к классу «card». Тогда все карты будут скрыты при загрузке страницы. И после этого FadeIn начинает работать корректно.