Question

在我的笔中：http://codepen.io/explicit_concept/pen/BLgoVG有一个脚本只会在整个.device div的第一个悬停时触发.icon元素的缩放/背景颜色变化。如何在悬停时触发效果仅持续3秒例如？

我已经看到它是由doTimeout jQuery插件完成的，但是为了学习我想从头开始。

当悬停时，是否可以使用setTimeout将元素添加到元素中，然后在完成计时器以撤消.addClass？

这是悬停的jQuery代码：

$(document).ready(function () {
$('.device').one('mouseenter',function() {
  $(this).find('.icon').addClass('icon-hovered');
    });
$('.device').mouseleave(function() {
  $('.icon').removeClass('icon-hovered');
    });

Answer 1

setTimeout(() => {
    $(this).find(".icon").removeClass("icon-hovered")
}, 3000); // time in milliseconds

在你的mouseenter听众中工作。

Answer 2

jsFiddle：https://jsfiddle.net/wxmc3qks/1/

在mouseleave事件中，只需使用javascript函数setTimeout即可。 jQuery delay函数仅用于动画延迟而不是函数。

$(function() {
  $('.button').on('mouseenter', function() {
    $(this).addClass('hovered');
  });

  $('.button').on('mouseleave', function() {
    var $this = $(this);
    setTimeout(function() {
      $this.removeClass('hovered');
    }, 3000);
  });
});

仅在有限的时间内对元素进行悬停效果

2 个答案: