我正在尝试使用hoverIntent插件来延迟进度条上的一些动画效果。但是,出于某种原因,hoverIntent似乎根本不起作用。
我的页面标题中包含以下内容(所有路径均已经过验证):
<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>
在sitewide.js中,我运行以下内容:
$(".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");
});
但是当我将鼠标悬停在相关的div上时,浏览器中没有任何反应,控制台会显示以下错误:
“cfg.over未定义”和“cfg.out未定义”
我已经使用jQuery的内置“悬停”进行了测试,它运行得很好。我还认为它可能与缓动插件有冲突,但在删除HTML和JS文件中对缓动插件的引用后,我仍然遇到同样的问题。最后,为了安全起见,我删除了所有其他自定义JS,但问题仍然存在。
有什么想法吗?谢谢!
答案 0 :(得分:4)
hoverIntent需要2个参数, 做
$(".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(){});