jquery语法错误

Question

此代码应该会产生以下效果：当.expander被鼠标悬停时，它会等待400毫秒，然后在270毫秒的过程中扩展到原始大小的150%。如果鼠标离开.expander，则展开将被取消。

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

当我将鼠标悬停在.expander上时，不会发生任何事情。然而，当我的老鼠离开.expander时，它会生长。因此，代码的第二部分一定很好。有人看到第一部分有什么问题吗？

Answer 1

您正在丢失setTimeout中的上下文this。您可以使用Function.prototype.bind将回调函数绑定到适当的上下文：

$.data(this, 'timer', setTimeout(function () {
    $(this).stop(true, true).animate({
        width: "150%"
    }, 270, function () {});
}.bind(this), 400));

如果您关心IE8支持，请使用$.proxy-简单绑定实现。

$.data(this, 'timer', setTimeout($.proxy(function () {
    $(this).stop(true, true).animate({
        width: "150%"
    }, 270, function () {});
}, this), 400));