I am attempting to use the hoverIntent plugin to delay some animation effects on progress bars. However, for some reason hoverIntent doesn't seem to be functioning at all.
I have the following in my page header (all paths have been verified):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="campaign-resources/_js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="campaign-resources/_js/jquery.hoverintent.js"></script>
<script type="text/javascript" src="campaign-resources/_js/sitewide.js"></script>
In sitewide.js I run the following:
$(".cause-block").hoverIntent(function() {
var originalWidth = $(this).find(".cause-chart-achieved").css("width");
var chartParams = { width: originalWidth };
$(this).find(".cause-chart-achieved").css("width", "0");
$(this).find(".cause-chart-achieved").animate(chartParams, "slow", "easeInOutSine");
});
But when I hover over the relevant div, nothing happens in the browser, and the console displays the following errors:
"cfg.over is undefined" and "cfg.out is undefined"
I've tested using jQuery's built-in "hover" and it works just fine. I also thought it might be a conflict with the easing plugin, but after removing references to the easing plugin in the HTML and JS files I still have the same issue. Finally, to be safe I removed all other custom JS, yet the issue persists.
Any ideas? Thanks!