0

我有这个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);
    }
});

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

else它将开始一个setInterval运行良好的功能，功能也是如此mouseleave。我遇到的问题只是回调，我不知道我做错了什么

*编辑**

现在我更改了代码，只使用.hoverwith 回调而不是使用.onwith 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);
});
4

1 回答 1

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属性，看起来您实际上想要将其添加到您的.boxesjquery 元素中，因为您的代码暗示了这一点。

所以你必须this在输入回调之前捕获一个变量，我这样做var dees = this;

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

于 2013-04-08T22:54:24.793 回答