У меня есть несколько товаров на странице коллекции, и я хотел бы запускать анимацию каждый раз, когда я наводю на карточку товара независимо.
Проблема: Анимация срабатывает для всех карточек продукта одновременно при наведении на каждую из них.
Я рассмотрел другие подобные вопросы здесь, но не смог найти решение для моейконкретная проблема.
var main = document.querySelectorAll(".main-card");
var anime = document.querySelectorAll(".bottom-card");
if (main.length !== 0){
for (var i=0; i<main.length; i++) {
(this).main[i].addEventListener("mouseenter", function(){
TweenMax.to(anime, 0.3, {opacity: 1, height: "143px"});
// .staggerFrom(".size", 0.5, {y: 10, opacity:0, ease:Elastic.easeOut}, 0.1)
});
(this).main[i].addEventListener("mouseleave", function(){
TweenMax.to(anime, 0.3, {opacity: 0, height: '0px'});
});
};
}
<form action="/cart/add" method="post" id="AddToCartForm">
<a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url | within: collection }}">
<div id="card" class="product-card__image-with-placeholder-wrapper" data-image-with-placeholder-wrapper>
<div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
<div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
<div id="id" class="main-card">
<div class="image-card">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
alt="{{ product.featured_image.alt }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
data-image>
</a>
<a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url | within: collection }}">
<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
{% include 'product-price', variant: product.selected_or_first_available_variant %}
</a>
<div id="bottom" class="bottom-card">
{% if product.title == "Blue Silk Tuxedo" %}
<div class="flex">
<select name="id" id="{{ product.handle }}" style="display: none;">
{% for variant in product.variants %}
{% if variant.available == true %}
<option {% unless variant.available %} disabled="disabled" {% endunless %} {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {% if variant.available %}{{ variant.price | money_with_currency }}{% else %}{{ 'products.product.sold_out' | t }}{% endif %}</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - Sold Out</option>
{% endif %}
{% endfor %}
</select>
{% if product.available and product.variants.size > 1 %}
{% for option in product.options %}
{% include 'swatch' with option %}
{% endfor %}
{% endif %}
</div>
<button type="submit" name="add" id="AddToCart" class="btn">
<span id="AddToCartText">Add to cart</span>
</form>
Каждый из продуктов имеет этот HTML-код. Таким образом, каждый продукт имеет одинаковые классы. Это в теме магазина.