1

弊社サイトのデザイン/UIに基づいてサイトを再設計しています

私が再設計をモデル化することになっているWebサイトを担当するWeb開発者は、来週の休暇中ですが、彼のUIエフェクトの1つを使用したいと思いました。

彼がホバーフェード効果に何を使用しているのか理解できないようです。そのため、彼はCSS3ではなく、jQueryライブラリを使用していると思います。

編集：私はfirebugを使用して、彼らが何をしているのかを理解しようとしましたが、成功しませんでした。

これが私が見ているものです。そのフェード効果は、右側のサイドバーのいくつかの要素で使用されます。クラスはfadehoverです。

この特定の問題を診断するのに役立つことはありがたいですが、私自身が将来同様の問題をどのように理解できるかを本当に知りたいです。

4

1 に答える 1

4

main.js（223行目）で、ホバーの原因となるこれを見つけました：

$("img.img-a").hover(
function() {
    $(this).stop().animate({"opacity": "0"}, 400);
},
function() {
    $(this).stop().animate({"opacity": "1"}, 800);
});

fadehoverdiv内には、クラスimg-aとimg-b. カーソルを の上img-aに置くと、その画像がフェードアウトします。したがって、CSSの使用img-bが遅れていると思います。img-a

これが私がやった方法です：

私は Google Chrome を使用し、タブに移動してクラスresourcesを (ctrl + F / cmd + F) で検索しました。fadehover残念ながら、少しの CSS と HTML しか見つからなかったので、その div 内の画像の 1 つのクラスを選択した結果、ビンゴになりました!

調べる方法は他にもあります。その要素を調べてマウスでホバーすると、DOM が変更されることがあります。DOM が変更された場合、それは JavaScript によって行われていることがわかります。それが jQuery であるか、プロトタイプであるか、または別のフレームワークであるかは別の話です。

DOM が変更されない場合は、CSS トランジションが使用されていることを確認できます。Flash、SVG、または HTML5 キャンバス要素が使用されていない限り;)

于 2012-11-01T10:06:27.870 に答える