Question

I’m not that good with js. How do I get this to work with hoverIntent?

$(document).ready(function () {
    $('#nav > li > a').hover(function(){
        if ($(this).attr('class') != 'active'){
            $('#nav li ul').slideUp(800);
            $(this).next().slideToggle(800);
            $('#nav li a').removeClass('active');
            $(this).addClass('active');
        }
    });
    return false;
});

I have try searching around, but just not too sure how to do it. It’s basically working now with hover. but how do I add in .hoverIntent into the code.

This is the Fiddle.

I can’t just change .hover to .hoverIntent right?

Answer 1

For hoverIntend, see jQuery plugin:
http://cherne.net/brian/resources/jquery.hoverIntent.html
(You just have to download the minified version and import it to your application: http://cherne.net/brian/resources/jquery.hoverIntent.minified.js).

Here the jsFiddle: http://jsfiddle.net/Fmu8Y/1/

Also a helpful link: Delay jquery hover event?

$(document).ready(function () {
  $('#nav > li > a').hoverIntent(function(){
    if (!$(this).hasClass('active')){
      $('#nav li ul').slideUp(800);
      $(this).next().slideToggle(800);
      $('#nav li a').removeClass('active');
      $(this).addClass('active');
   }
 }, function() {
  if ($(this).hasClass('active')){
      $(this).next().slideUp(800);
      $(this).removeClass('active');
    }  
  });
  return false;
});