Javascript 如何在js中设置单个角色的动画或在悬停时使用jquery？

我可以设置整个单词的动画，或者如果我使用任何其他选择器，但是使用blast作为类，我无法设置单个角色的动画

//used blast.js to seperate each character
   $("h1").blast({ delimiter: "character" }); 

//on hover function to animate each character on hover and used bounce animation using animate.css from github, https://github.com/daneden/animate.css/
    $(".blast").hover(
        function()
    {
       ` $(this).addClass("animated bounce");`

    },
        function()
    {
    `$(this).removeClass("animated bounce");`
        });

---

*

这是因为在准备文档时，

.blast

元素不存在，因此必须使用将事件处理程序绑定到它们

请注意，在这种特殊情况下，使用“unhover”回调（或

mouseleave

）事件将导致元素在从鼠标上弹起或鼠标移动后弹下来。这可能导致潜在的不良结果

我已经对它进行了修改，以便在动画运行后删除该类（在

bounce

的情况下为1秒）

还有一件事需要注意的是，对于大多数这样的动画，它们无法处理

内联

元素（例如

），因此必须将它们设置为

内联块

请看一下这个片段：

jQuery（文档）.ready（函数（$）{
//炸掉``元素
$（'h1'）.blast（{分隔符：'字符'}）；
//`将`mouseenter`事件处理程序重新绑定到新的`blast`元素
$（'h1'）.on（'mouseenter'，'.blast'，function（）{
//将目标“.blast”元素存储为实例变量
var$target=$（这是）；
//向其中添加动画类
$target.addClass（'animated bounce'）；
//之后对实例化变量运行'removeClass'函数
//1秒（动画长度为“.bounce”）
setTimeout（函数（）{
$target.removeClass（'animated bounce'）；
}, 1000);
});
});
默认情况下，
/*span.blast是内联的，因此动画不会
除非我们将其设置为块或内联块元素，否则它将正常工作*/
.爆炸{
显示：内联块；
}

这是一个标题
使用Jquery简单脚本（没有免费的插件）！！
并使用CSS3动画：

前端开发人员
$（“.animate\u letter\u hover”）。每个（函数（）{
变量
$this=$（this），
$dataAnimate=$（this）.data（“animate”），
$dataHideAnimate=$（this）.data（“隐藏动画”）；
$this.html（函数（索引，html）{
返回html.replace（/\S/g，$&'）；
});
$（“.animate_letter_hover>span”）。在（“鼠标右键单击touchstart”，函数（）{
变量
$this=$（this）；
$this.addClass（$this.parent（）.data（“animate”）+“animate\uu animated”）；
setTimeout（函数（）{
$this.removeClass（）；
}，$dataHideAnimate）；
});
});

看起来棒极了
最好绑定到
h1
，而不是一直绑定到
文档。
<h2 class="animate_text" data-animate="animate__rubberBand" data-hide-animate="900"> Front End Developer</h2>
        
$(".animate_letter_hover").each(function() {
    
      var
      $this              = $(this),
          $dataAnimate   = $(this).data("animate"),
          $dataHideAnimate = $(this).data("hide-animate");
    
      $this.html(function(index, html) {
        return html.replace(/\S/g, '<span>$&</span>');
      });
    
      $(".animate_letter_hover > span").on("mouseenter click touchstart", function() {
    
        var
        $this            = $(this);
    
        $this.addClass($this.parent().data("animate") + " animate__animated ");
    
        setTimeout(function() {
    
          $this.removeClass();
    
        }, $dataHideAnimate);
    
      });
    
    });