如何淡入淡出每个列表元素中的相对链接请

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"); 
     }); 
    }); 
});