如何在鼠标悬停时暂停.scrollTop()动画? (包括jsfiddle)

时间:2014-10-03 10:03:54

标签: javascript jquery html css

我使用以下jquery代码来创建慢滚动动画。 http://jsfiddle.net/fhj45f21/

不幸的是,我在将鼠标悬停在动画上时遇到了困难。有人可以看看并给我一个提示吗?

function Scroller(y){

    this.times = 0;
    this.moveInter = 0;
    this.backInter = 0;

    this.moveBack = function () {

        var self = this;
        clearInterval(this.moveInter);
        this.backInter = setInterval(function () {
            self.times -= 5;
            y.scrollTop(self.times);
            if (self.times == 0) {
                return self.startMove();
            }
        }, 1);
    }

    this.move = function() {

        var self = this;
        this.moveInter = setInterval(function () {
            self.times++;
            y.scrollTop(self.times);
            if (self.times == 1200) {
                return self.moveBack();
            }
        }, 50);
    }

    this.startMove = function() {
        this.times = 0;
        var self = this;
        if (this.backInter != null) {
            clearInterval(this.backInter);
        }
        window.setTimeout(function () {
            self.move();
        }, 1000);
    }
}
jQuery('.textBox').each(function () {

    y = jQuery(this);
    var scroller = new Scroller(y);
    scroller.startMove();

});

非常感谢!

1 个答案:

答案 0 :(得分:2)

你走了:http://jsfiddle.net/nxk4vseq/ 添加一个带有mousein和mouseout函数的y.hover处理程序

var scrl=this;
y.hover(function(){
    clearInterval(scrl.moveInter);
},function(){
    scrl.move();    
});