javascriptjqueryhoverintent

How to use 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. How can I fix it?

Solution

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