Question

我有这个js函数：

$('#linkNext').on({
    mouseenter: function () {
        if ($('#conteudo .boxes').hasClass('ativo')) {
            $('#conteudo .boxes').removeClass('ativo');
            $('.boxAberto').animate({width: '0'}, 600, function () {
                // callback
                $('#linkNext').hover(function () {
                    this.iid = setInterval(function () {
                        if (cont > -565) {
                            cont -= 5;
                            $('#conteudo').attr('style', 'left:' + cont + 'px');
                            console.log(cont)
                        }
                        if (cont <= -565) {
                            $('#linkNext').hide();
                        }
                    }, 0);
                });
                $('#linkNext').mouseleave(function () {
                    this.iid && clearInterval(this.iid);
                });
                // callback ends
            });
        } else {
            this.iid = setInterval(function () {
                if (cont > -565) {
                    cont -= 5;
                    $('#conteudo').attr('style', 'left:' + cont + 'px');
                    console.log(cont)
                }
                if (cont <= -565) {
                    $('#linkNext').hide();
                }
            }, 0);
        }
    },
    mouseleave: function () {
        this.iid && clearInterval(this.iid);
    }
});

在鼠标悬停时，它会检查该元素是否具有类.ativo。如果有，它将删除该类并为元素设置动画并对回调进行切换。回调不起作用，我认为我以错误的方式使用.hover。

在else中，它将开始setInterval，效果很好，mouseleave功能也是如此。我遇到的问题只是回调，我不知道我做错了什么

*的修改 **

现在我更改了代码，只使用.hover进行回调，而不是.on使用mouseenter mouseleave。但我仍然有同样的问题。第// callback行上方的回调无效..

$('#linkNext').hover(function () {
    if ($('#conteudo .boxes').hasClass('ativo')) {
        $('#conteudo .boxes').removeClass('ativo');
        $('.boxAberto').animate({width: '0'}, 600, function () {
            // callback
            if ($('#conteudo .boxes:not(.ativo)')) {
                $('#linkNext').hover(function () {
                    this.iid = setInterval(function () {
                        if (cont > -565) {
                            cont -= 5;
                            $('#conteudo').attr('style', 'left:' + cont + 'px');
                            console.log(cont)
                        }
                        if (cont <= -565) {
                            $('#linkNext').hide();
                        }
                    }, 0);
                }, function () {
                    this.iid && clearInterval(this.iid);
                });
            }
        });
    } else {
        this.iid = setInterval(function () {
            if (cont > -565) {
                cont -= 5;
                $('#conteudo').attr('style', 'left:' + cont + 'px');
                console.log(cont)
            }
            if (cont <= -565) {
                $('#linkNext').hide();
            }
        }, 0);
    }
}, function () {
    this.iid && clearInterval(this.iid);
});

Answer 1

替换以下代码：

if ($('#conteudo .boxes:not(.ativo)')) {
            $('#linkNext').hover(function () {
                this.iid = setInterval(function () {

这个：

if ($('#conteudo .boxes:not(.ativo)').length) {
            var dees = this;
            $('#linkNext').hover(function () {
                dees.iid = setInterval(function () {
                ...
                ...
            , function () {
                dees.iid && clearInterval(dees.iid);
            });

因为在执行this.iid时，您将iid属性设置为回调的函数原型，而您似乎真正希望将其添加到.boxes jquery元素作为您的代码暗示。

因此，您必须在输入回调之前将this捕获到变量，我会使用var dees = this;

此外，当您想要检查jquery元素的存在时，请使用.length属性。

回调.hover功能不起作用

1 个答案: