javascript - Callback .hover function isnt working -

i have js function:

$('#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);     } }); 

on mouse hover, checks if element has class .ativo. if has, it'll remove class , animate element , beggings callback. callback isnt working, think im using .hover in wrong way.

in else it'll begins setinterval working great , mouseleave function. problem have callback, dont know im doing wrong

*edit**

now changed code, using .hover callback instead using .on mouseenter mouseleave. still have same problem. callback above line // callback isnt working..

$('#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); }); 

replace following code:

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

for one:

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

because when doing this.iid asigning iid property function prototype of callback, seems wanted add .boxes jquery element code implied.

so have capture this variable prior enter callback, var dees = this;

also when want check existance of jquery element, use .length property.