Question

我有一个持续6秒的关键帧动画。我想要的是：每次点击'.box'，等动画结束（6秒），

$('.box').click(function() {
        $('.content').addClass("my-animation"); // this animation last 6 seconds
    });

然后激活这个悬停功能：

 $('.content').hover(function() {
// ... specific animation
}, function() {
// ...
});

换句话说，我只想在 #content动画时“关闭”悬停功能，因为如果我在“my-animation”运行时将鼠标悬停在我的内容上，它会取消。

编辑HTML：

see title 

Answer 1

您可以使用off方法删除动画开始时附加到悬停事件的所有处理程序：

$('.box').click(function() {
     // detach hover handler
     $('.content').off('hover', handler);

     // start animation
     $('.content').addClass("my-animation");

     // reattach handler after 6s
     setTimeout(function() {
         $content.on('hover', handler);
     }, 6000);
});

$content.on('hover', handler);

function handler(e) {

    if (e.type == "mouseenter") {
        // ... Specific animation
    } else { // mouseleave
        // ...
    }

}

Answer 2

只需添加一个变量即可防止悬停。无需解除绑定/重新绑定..

＆＃13;

$(document).ready(() => {
      var isAnimating = false;

      $('.box').on('click', function() {
        isAnimating = true;
        
        $('.content').addClass("my-animation"); // this animation last 6 seconds
        setTimeout(() => { isAnimating = false; }, 6000);
      });

      $('.content').hover(function()  {
        if (isAnimating) return;
        $(this).addClass('border-green');
      }, function() {
        if (isAnimating) return;
        // do something else...
        $(this).removeClass('border-green');
      });
    });

＆＃13;

.box, .content{
  display: block;
  width: 100px;
  height: 50px;
  border: 5px solid red;
  transition-duration: 6s;
  transition-property: transform;
}
.content { border-color: blue; }

.my-animation{
  transform:rotate(360deg);
}

.border-green { border-color: green; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="box">Box</p>
<p class="content">Title</p>

＆＃13;

如果屏幕上有多个.box让我知道，我会更新答案以使用多个.box和.content个对象。

如何使用Jquery关闭悬停？

2 个答案: