回調.hover功能心不是工作

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當你asigning一個iid屬性到你的回調函數原型，看起來你真的想把它添加到你的.boxes代表你的代碼隱含的jQuery元素。

所以，你必須捕捉this一個變量之前，輸入您的回調，我var dees = this;

做此外，當您想檢查一個jQuery元素是否存在等，使用.length屬性。