如何淡入淡出每個列表元素中的相對鏈接請

Question

我是新來的jQuery，我試圖做一個簡單的淡入淡出動畫，使實踐中我所學到的東西，不幸的是我不是得到我想要的結果 我有一個列表元素，每個li元素中都有一個鏈接： 我想要什麼：當我滾動一個li元素時，我想讓相對的<a>鏈接淡入，當我推出I希望它淡出。這是我下面的代碼：

$(function(){ 
    $("a.viewAllProductsLink").hide(); 
    $(".scrollable ul>li").each(function(){ 

     $(this).mouseenter(function(){ 
      $("a.viewAllProductsLink").fadeIn("slow");  
     }) 
     .mouseleave(function(){ 
      $("a.viewAllProductsLink").fadeOut("slow"); 
     }); 
    });  
}); 

Answer 1

當你調用$('a.viewAllProductsLink')你選擇所有與類的鏈接，當你想要做的是隻選擇你翻身的元素中的鏈接。要做到這一點，使用$(this).find()：

$(function(){ 
    $("a.viewAllProductsLink").hide(); 
    $(".scrollable ul>li").each(function(){ 

     $(this).mouseenter(function(){ 
      $(this).find("a.viewAllProductsLink").fadeIn("slow"); 
     }) 
     .mouseleave(function(){ 
      $(this).find("a.viewAllProductsLink").fadeOut("slow"); 
     }); 
    }); 
}); 

此外，它的innefficient在這裏使用.each()因爲所有的元素都具有相同的行爲，你可能希望動畫前使用.stop()保持動畫隊列從建立當你多次快速停留在元素上時：

$(function(){ 
    $("a.viewAllProductsLink").hide(); 
    $(".scrollable ul>li").mouseenter(function(){ 
      $(this).find("a.viewAllProductsLink").stop(true,true).fadeIn("slow"); 
     }) 
     .mouseleave(function(){ 
      $(this).find("a.viewAllProductsLink").stop(true,true).fadeOut("slow"); 
     }); 
    }); 
});