javascript - 将hoverIntent.js 插件与 jQuery 结合使用的问题

Question

我正在尝试在一个名为 navbar 的元素上使用 jQuery 和 hoverIntent.js，如下所示

 $(".navbar").hoverIntent({
    over:  $(".navbar").animate({height: "100px"}),
    out:   $(".navbar").animate({height: "50px"})
  });

.navbar{background:grey;  height:50px;  width:300px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.8.1/jquery.hoverIntent.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid"> </div>
</nav>

我尝试了以下两种方法，但都不起作用

 $(".navbar").hoverIntent({
    over:  $(".navbar").animate({height: "100px"}),
    out:   $(".navbar").animate({height: "50px"})
  });

$(".navbar").hoverIntent({
function() {
    $(".navbar").animate({height: "100px"});
  }, function() {
    $(".navbar").animate({height: "50px"});
  }
});

但它不起作用。你能告诉我如何修复它吗？

Answer 1

将它们放入函数中...

$(".navbar").hoverIntent({
    over:  function(){ $(".navbar").animate({height: "100px"}) },
    out:   function(){ $(".navbar").animate({height: "50px"}) }
  });

.navbar{background:grey;  height:50px;  width:300px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.8.1/jquery.hoverIntent.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid"> </div>
</nav>