Question

我为一个jquery事件编写了一些代码，这个事件在一个div被鼠标输入的延迟之后被触发，但是如果鼠标在延迟期间离开了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() {});
});

Jquery：为什么在mouseleave上没有取消计时器？

1 个答案: