Question

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!

Answer 1

hoverIntent takes 2 parammeters,
do

$(".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");
},
function(){});