Как постепенно исчезнуть относительная ссылка внутри каждого элемента списка, пожалуйста

Question

Я новичок в jQuery, я пытаюсь сделать простую анимацию постепенного исчезновения, чтобы на практике реализовать то, что я выучил до сих пор, к сожалению, я не получаю желаемый результат У меня есть элементы списка, внутри каждого элемента li есть ссылка: Что я хочу: когда я переворачиваю элемент li, я хочу, чтобы относительная ссылка <a> исчезла, а когда я развернусь, я хочу, чтобы она исчезла. Это мой код ниже:

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