Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我尝试了以下两种方法，但没有一种方法可以使用

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

将它们放入功能......

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

不要发送对象，只需发送两个处理程序。

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

使用jQuery的hoverIntent.js插件的问题

2 个答案: