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

Question

我是 jQuery 的新手，我正在尝试制作一个简单的淡入淡出动画来实践我到目前为止所学到的知识，不幸的是我没有得到我想要的结果 我有一个列表元素，每个 li 元素内都有一个链接： 我想要的：当我滚动到 li 元素上时，我希望相对的 链接淡入，当我推出时我希望它淡出。这是我的代码如下：

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

此外，此处使用 .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");
        });
    }); 
});