使用鼠標懸停在setTimeout上的鏈接更改圖像

我正在設計一個超級菜單，並希望根據鏈接被徘徊在一個div內更新圖像。我試圖做的是等待mouseleave部分代碼，以便如果用戶立即移動到下一個LI標記，則代碼的部分代碼不會執行。但是如果用戶不在mouseenter另一個LI 2秒，那麼這個mouseleave代碼被執行。使用鼠標懸停在setTimeout上的鏈接更改圖像

問題是＃1返回值正常，但＃2給出'未定義'的值。爲什麼是這樣，我該如何解決這個問題？我該如何獲取當前正在LI中徘徊在setTimeout函數內部的屬性？因爲一旦我有了價值，我就可以做一個比較來控制流量。非常感謝。

// FADE IN THE IMAGE ACCORDING TO THE MENU ITEM 
// HTML=<li><a data-pos="left -256px" href="somelink">Link A</a></li> 
var $sprite = $('#photo'); 

    $('li>a').hover(
     function() { 
      sprite_pos=$(this).attr('data-pos');  // fetch value for the tag 
      // Put an if otherwise this code gets executes for all li>a creating an unnecessary fade-in out effect 
      if(typeof(sprite_pos) != "undefined") { 
       $sprite.fadeTo(200, 0, function() { 
       $sprite.css("background-position",sprite_pos); }); 
       $sprite.fadeTo(200, 1); 
      } 
     }, 
     function() { 

      //sprite_pos=$(this).attr('data-pos');   // #1 

      setTimeout(function() { 
       sprite_pos=$(this).attr('data-pos');  // #2 fetch value for the tag 

      if(typeof(sprite_pos) != "undefined") { 
       $sprite.fadeTo(200, 0, function() { 
       $sprite.css("background-position",default_pos); }); 
       $sprite.fadeTo(200, 1); 
      } // if(typeof(sprite_pos) != "und ... 
      }, 2000); 
     } 

    ); // $('li>a').hover(...

來源

2013-07-25 user1771959

當setTimeout稱爲this成爲window對象。要修復只需創建一個參考原始this上下文：

function() { 

    var me = this; 

    setTimeout(function() { 

     sprite_pos=$(me).attr('data-pos');  // #2 fetch value for the tag 
     ///   ^^ 

     /// ... rest of code

來源

2013-07-25 00:17:22 K3N

這樣做的伎倆。非常感謝！！！ – user1771959

使用鼠標懸停在setTimeout上的鏈接更改圖像

回答

相關問題