0

私は自分の Jquery と Javascript を書くのが初めてで、機能する次のコードを作成しましたが、あまりエレガントではありません。基本的に、1 つの 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

アニメーションは 2 つしかないため、関数として配置します。

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 に答える