Question

我正在尝试使用anime.js对称为.grid-item的div中的元素进行动画处理这是一个简单的悬停动画，当用户悬停时，文本和图标会在其中进行动画处理。 .grid-item在Mansory网格中重复存在，并且所有这些都崩溃了。这个想法当然是只影响悬停的.grid-item的子代。目前所有.grid-item都被触发了。

当我删除动画功能并使用$（this）操纵CSS属性时，一切正常。我似乎无法弄清楚要在动漫功能中输入什么作为目标。任何帮助将非常感激！

html

declare @Something table
(
    Serial_no varchar(10)
    , Container_Status varchar(10)
    , From_Serial_No varchar(10)
    , Add_By varchar(50)
    , Last_Name varchar(10)
    , Position_Key varchar(10)
    )

    insert @Something values
    (   'S439773','Scrap','S438590','67005','Jones','22237'),
(   'S598045','Scrap','S596759','67005','Jones','22237'),
(   'S596759','Suspect','S589956','56011','Bryant','23028'),
(   'S589956','OK','S586597','1908350','Pippen','27433'),
(   'S586597','OK','S586083','56011','Bryant','23028'),
(   'S436403','OK','S435310','56011','Bryant','23028'),
(   'S586083','OK','s585319','67005','Jones','22237'),
(   'S585319','OK','','67271','Magic','23082'),
(   'S438590','Suspect','S438537',67833,'Sey','25742'),
(   'S438537','OK','S436095',67833,'Sey','25742'),
(   'S436095','OK','S436403',1908349,'Jordan','27433'),
(   'S435310','OK','S435283',1908349,'Jordan','27433'),
(   'S415897','OK','10-00','67271','Magic','23082'),
(   'S435283','OK','S432977','1908349','Jordan','27433'),
(   'S432977','OK','S415897','1918880','Campbell','23028')

javascript（我现在所拥有的）

Scrap

Answer 1

尝试一下：

$('.grid-item').hover(function() {
   anime ({
   targets: [this.querySelector('.tl-item-image'), this.querySelector('.another-element')],
   scale: 1.1,
   opacity: 0.6,
   easing: 'easeInOutQuart',
   duration: 700 
  });
}, function() {
   anime ({
   targets: [this.querySelector('.tl-item-image'), this.querySelector('.another-element')],
   scale: 1,
   opacity: 1,
   easing: 'easeInOutQuart',
   duration: 700 
   });
});

很明显，如果您不需要为多个内部元素制作动画，请删除, this.querySelector('.another-element')和方括号。

我使用了this.querySelector，因为this是指当前悬停的.grid-item。我使用querySelector来选择子元素，也是因为动漫是Javascript库，除了jQuery对象外，都不例外。

演示： https://jsfiddle.net/rxcdayLz/20/

Anim.js-当我只希望触发悬停的元素时作为目标输入的内容

1 个答案: