我有一个jquery代码,它不断地上下移动一个包含带有徽标的列表的div。动画在设定的时间间隔内重复,并且似乎在Chrome,FireFox和IE 9和8中都没有正常工作(没有控制台错误)。
然而在IE7中我得到'脚本错误'并且浏览器完全冻结...我认为setInterval和clearInterval工作不正常或者我弄乱了我的代码......
这是:
//<!------------------LOGOS ------------------>
// the automatic scroll start immediately
$(document).ready(function () { membersLogos() });
// set the interval after which to restart the animated scroll
$(function () {
var intervalID;
var resetTimer = function () {
if (intervalID) { clearInterval(intervalID) };
intervalID = setInterval(function () {
membersLogos();
}, 190000);
};
});
// set the interval after which to restart the animated scroll
function membersLogos() {
var pane = $('#mypane');
if ($('#mypane').length) {
pane.jScrollPane({
animateScroll: true, //added
animateDuration: 95000, //added - length each way in milliseconds
stickToTop: true,
//autoReinitialise: true,
enableKeyboardNavigation: true
});
var api = pane.data('jsp');
var logosHeight = parseInt($('#mypane .jspPane').height());
//listen to the x-axis scrolling event
pane.bind('jsp-scroll-y', function (event, pos_y, at_top, at_bottom) {
//we're at the bottom now lets scroll back to the top
if (at_bottom) {
api.scrollToY(0);
$(this).unbind(event); //added with edit
$(this).bind('jsp-scroll-y', function (event, pos_y, at_top, at_bottom) {
if (at_top) {
$(this).unbind(event);
api.scrollToY(logosHeight);
}
});
}
});
//initial animate scroll to the top
api.scrollToY(logosHeight);
}
}
任何想法或建议都是错的?提前致谢! 维克
答案 0 :(得分:1)
由于您已将间隔设置为完全两个动画的总和(190000 = 95000 * 2),如果在动画之前再次触发间隔功能,我不会感到惊讶完成,也许会导致某些事情踩到别的东西。它很容易检查:只需将间隔设置为300000或其他东西,看看问题是否消失。
为了避免让间隔再次过火的可能性,而不是使用setInterval
(这几乎总是比它的价值更麻烦),我会看到jScrollPane
是否为你提供了完成动画完成时回调。如果是,请使用该完成回调来触发下一个动画。如果没有,我可能会想要添加它。