私はこの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
*編集**
with.hover
を使用する代わりに with callbackのみを使用して、コードを変更しました。しかし、私はまだ同じ問題を抱えています。ラインの上のコールバックは機能していません...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);
});