優化jquery代碼深入hove

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