HoverIntent jQuery and calling the jQuery script

Question

I'm working to integrate hoverintent jQuery into my site. I've plugged it into my code but I'm receiving an error from the Chrome debugger. The error reads Uncaught TypeError: Cannot use in operator to search for display in undefined. I'm not sure what is wrong. Here is my code.

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">  

<script type="text/javascript" src="http://cherne.net/brian/resources

/jquery.hoverIntent.js"></script>

</script> 

<script type="text/javascript" >

$(document).ready(function() {

var config = {    

  sensitivity: 3,
  interval: 200,   
  over: $(this).animate({opacity: 1}, 500), 
  timeout: 500, 
  out: $(this).animate({opacity: 0}, 500) 

};

var config_1 = {    

  sensitivity: 3, 
  interval: 200,    
  over: $(this).animate({opacity: 1}, 500),
  timeout: 500,    
  out: $(this).animate({opacity: 0}, 500) 

};


$('#form1').hoverIntent(config);

$('#form2').hoverIntent(config_1);

});

</script>

Here is the html code

<div id="div1">

<form action="" id="form1" method="post">

<textarea id="inputbox1"  name="what_i_do" maxlength="160" value=""><?php echo   

$profile_data['what_i_do']; ?></textarea>

<input type="submit" id="button1" value="Edit">

</form>

</div>

<div id="div2">

<form action="" id="form2" method="post">

<textarea id="inputbox2" name="fait_accompli"  maxlength="160" value=""><?php echo 

$profile_data['fait_accompli']; ?></textarea>

<input type="submit" id="button2" value="Edit">

</form>

</div>

Answer 1

It's because you are missing the closing curly brace and parentheses for the document.ready function

$('#form1').hoverIntent(config);

$('#form2').hoverIntent(config_1);
}); // <-----  here to close the document.ready function

change your configurations to include function()

var config = {       
  sensitivity: 3,
  interval: 200,   
  over: function(){
         $(this).animate({opacity: 1}, 500)
  }, 
  timeout: 500, 
  out: function(){
         $(this).animate({opacity: 0}, 500)
  }    
};

Also if both configs are the same you can just remove one of them