javascript - 动画元素具有相同的类，但单独

Question

我正在尝试为具有相同类的元素单独设置动画。我是一个完整的 jQuery 菜鸟，不知道如何实现这一点，需要你的帮助。

这是我拥有的当前代码：（但是一旦我将鼠标悬停在卡片/摘要上，每一个都在制作动画）我只想将当前元素悬停在动画中。

最好的问候，乔文

/*add perspective to row for 3d perspective of child elements*/
.et_pb_blurb {
   perspective: 1000px;
}
 
/*preserve-3d needed for 3d effect on card elements*/
.et_pb_blurb_content {
   transform-style: preserve-3d;
   transition: all 100ms linear !important;
}
 
/*transition timing function and duration for card elements*/
.et_pb_main_blurb_image,
.et_pb_module_header,
.et_pb_blurb_description,
.et-mousemove-card .et_pb_button_module_wrapper {
    transition: all 750ms ease-out !important;
}
 
/*transform styles for card elements*/
.et_pb_main_blurb_image.transform-3d {
   transform: translateZ(150px) rotateZ(10deg) !important;
}
.et_pb_module_header.transform-3d {
   transform: translateZ(150px) !important;
}
.et_pb_blurb_description.transform-3d {
   transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
   transform: translateZ(150px) rotateX(20deg) !important;
}

</style>


This is my script


    //Items
    var $hoverContainer = $(".et_pb_blurb");
    var $mousemoveCard = $(".et_pb_blurb_content");
    var $cardImage = $(".et_pb_main_blurb_image");
    var $cardHeading = $(".et_pb_module_header");
    var $cardInfo = $(".et_pb_blurb_description");
    var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");
     
    //Moving Animation Event
    $hoverContainer.on("mousemove", function (e) {
       let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
       let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
       $mousemoveCard.css(
         "transform",
         `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
       );
    });
     
    //Animate on Hover
    $hoverContainer.hover(function () {
        $mousemoveCard.toggleClass("transform-3d");
        $cardHeading.toggleClass("transform-3d");
        $cardImage.toggleClass("transform-3d");
        $cardButton.toggleClass("transform-3d");
        $cardInfo.toggleClass("transform-3d");
    });
     
    //Pop Back on mouseleave
    $hoverContainer.on("mouseleave", function () {
        $mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
    });
   

标签： javascriptjquerycss