jQuery: code stops working after adding delay() and removeClass()

Question

Here\'s my code...

 $(\'nav ul li\').hover(function() {

    $(this).addClass(\'hoverIn\');


  },
  function() {

    $(this).addClass(\'hoverOut\');


  })         


        

Answer 1

jQuery .delay() applies to the animation queue, it does not serve as a timer like setTimeout does...

To your goal, I can suggest you to use the hoverIntent plug-in:

See this working Fiddle Example! ^{adjust the timeout to fit your needs}

jQuery

$("nav ul li").hoverIntent({    
    sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)    
    interval: 10,   // number = milliseconds for onMouseOver polling interval    
    timeout: 800,   // number = milliseconds delay before onMouseOut    
    over:function(){
        $(this).removeClass("hoverOut").toggleClass("hoverIn");
    },
    out: function(){
        $(this).removeClass("hoverIn").toggleClass("hoverOut");
    }
});