javascript - Jquery:为什么在 mouseleave 上计时器没有被取消？

Question

我编写了一些代码，以便在鼠标输入 div 时延迟后触发 jquery 事件，但如果鼠标在延迟期间离开 div，则会取消该事件。该代码工作完美，但我尝试将相同的代码格式应用于另一个 jquery 事件，并且如果我的鼠标在延迟期间离开 div，该事件不会取消。这是我的新代码，不起作用:

<div class="expander"><%=image_tag("BigCircle2.jpg")%></div>
<script type="text/javascript">
  $(".expander").on('mouseenter', function () {
    $.data(".expander", 'timer', setTimeout(function() {
      $(".expander").stop(true, true).animate({width: "150%"}, 270, function() {
      });
    }, 400));
  }).on('mouseleave', function() {
    clearTimeout($.data(".expander", 'timer'));
    $(".expander").stop(true, true).animate({width: "100%"}, 270, function() {
    });
  });
  $(".expander").mouseleave(function () {
    $(".expander").animate({width: "100%"}, 270, function() {
    });
  });
</script>

问题是，如果鼠标在 400 延迟期间离开 .expander，则 mouseenter 事件不会取消。有人看出我的代码有什么问题吗？

<小时/>

这是我完美执行的初始代码:

<script type="text/javascript">
  $("#top").hide();
  $("#con").on('mouseenter', function () {
    $.data(this, 'timer', setTimeout(function() {
      $('#top').stop(true, true).fadeIn("fast");
    }, 400));
  }).on('mouseleave', function() {
    clearTimeout($.data(this, 'timer'));
    $('#top').stop(true, true).fadeOut('fast');
  });
  $("#con").mouseleave(function () {
    $('#top').fadeOut("fast");
  });
</script>

Answer 1

jQuery 的 $.data()需要 DOM 对象...新代码使用字符串选择器。

$.data(".expander")

将其更改为 this 或者只是不使用 $.data()

更新:“不要使用$.data()”我的意思是:

var timer;
$(".expander").on('mouseenter', function () {
    timer = setTimeout(function() {
        $(".expander").stop(true, true).animate({width: "150%"}, 270, function() {
        });
    }, 400);
}).on('mouseleave', function() {
    clearTimeout(timer);
    $(".expander").stop(true, true).animate({width: "100%"}, 270, function() {});
});
$(".expander").mouseleave(function () {
    $(".expander").animate({width: "100%"}, 270, function() {});
});