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>

我尝试了以下两种方法，但 none 有效

 $(".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(
    function() {$(".navbar").animate({height: "100px"})}, 
    function() {$(".navbar").animate({height: "50px"})}
);

Answer 2

将它们放在函数中...

$(".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>

hoverIntent.js 插件与 jQuery 一起使用的问题

Issue on Using hoverIntent.js Plugin with jQuery

javascript

jquery

hoverintent