0

我是编写自己的 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});
    });
4

1 回答 1

0

由于只有两个不同的动画，我将其作为一个函数：

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');
})
于 2013-05-31T14:10:25.690 回答