심층 호버 용으로 Jquery 코드 최적화

Question

저는 제 자신의 Jquery와 Javascript를 처음 사용하고 다음과 같은 코드를 만들었지 만 매우 우아하지는 않습니다. 기본적으로 하나의 ID 위로 마우스를 이동하면 불투명하게 애니메이션이 만들어집니다. 부모/형제 관계는 없습니다. 페이지 전체에서 다른 위치에있는 PNG입니다.이 프로젝트에는 CSS 애니메이션을 사용할 수 없습니다. 이 코드를 표현하는 더 좋은 방법이 있습니까? ID 및 클래스 이름을 쉽게 변경할 수 있습니다. 내가 배울 수 있도록 어떤 도움을 주셔서 감사합니다. hoverIntent 플러그인 사용.

$('#poe').hoverIntent(function() { 
     $('.p_rb,.p_dd,.p_pc').animate({opacity: ".2"}, {duration: 175, queue: true}); 
     $('.p_oe,.p_rb_p_oe').animate({opacity: "1"}, {duration: 175, queue: true}); 
    }); 
    $('#ppc').hoverIntent(function() { 
     $('.p_rb,.p_dd,.p_oe,.p_rb_p_oe').animate({opacity: ".2"}, {duration: 175, queue: true}); 
     $('.p_pc').animate({opacity: "1"}, {duration: 175, queue: true}); 
    }); 
    $('#pdd').hoverIntent(function() { 
     $('.p_rb,.p_oe,.p_pc,.p_rb_p_oe').animate({opacity: ".2"}, {duration: 175, queue: true}); 
     $('.p_dd').animate({opacity: "1"}, {duration: 175, queue: true}); 
    }); 
    $('#prb').hoverIntent(function() { 
     $('.p_oe,.p_dd,.p_pc').animate({opacity: ".2"}, {duration: 175, queue: true}); 
     $('.p_rb,.p_rb_p_oe').animate({opacity: "1"}, {duration: 175, queue: true}); 
    }); 

Answer 1

(가) 두 개의 서로 다른 애니메이션이, 나는 함수로 넣어 것 :

function animate(first, second){ 
    $(first).animate({opacity: ".2"}, {duration: 175, queue: true}); 
    $(second).animate({opacity: "1"}, {duration: 175, queue: true}); 
} 

다음

호버에서 호출 : 작업 코드의 개선을 위해

$('#prb').hoverIntent(function() { 
    animate('.p_oe,.p_dd,.p_pc', '.p_rb,.p_rb_p_oe'); 
})