Behseini Behseini - 19 days ago 6
Javascript Question

Issue on Using hoverIntent.js Plugin with jQuery

I am trying to use jQuery and

hoverIntent.js
on one element called
navbar
as below



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









I tried both of following methods but none of them work

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

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


but it is not working. Can you please let me know how to fix it?

Answer

Put them in functions...

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