javascript - 如何在 js 中为单个字符设置动画或在悬停时使用 jquery？

Question

我可以为整个单词设置动画，或者如果我使用任何其他选择器但使用 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");`
        });

*

Answer 1

这是因为 .blast准备文档时元素不存在，因此您必须使用 .on() 将事件处理程序绑定(bind)到它们.

请注意，在这种特殊情况下，使用“取消悬停”回调(或 mouseleave )事件将导致元素在它们从鼠标弹开或鼠标移动后快速返回。这可能会导致潜在的不良结果。

我已经修改它以在动画运行后删除类(在 bounce 的情况下为 1 秒)

还有一点需要注意的是，对于大多数这样的动画，它们将无法在 inline 上运行。元素(例如 <span> 的)，因此您必须将它们设置为 inline-block .

看看这个片段:

jQuery(document).ready(function($){
  // Blast the `<h1>` element
  $('h1').blast({ delimiter: 'character' });
  
  // `Rebind the `mouseenter` event handler to the new `.blast` elements
  $('h1').on('mouseenter', '.blast', function(){

    // Store the targeted `.blast` element as an instanced variable
    var $target = $(this);

    // Add the animation classes to it
    $target.addClass('animated bounce');

    // Run the `removeClass` function on our instanced variable after
    // 1 sec (animation length of `.bounce`)
    setTimeout(function(){
      $target.removeClass('animated bounce');
    }, 1000);
  });
});

/* span.blast is inline by default, so animations won't 
   work unless we make it a block or inline-block element */
.blast {
  display: inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/blast-text@2.0.0/jquery.blast.min.js"></script>
<h1>This is a headline</h1>