jquery - 如何确定网站使用什么来实现特定的 UI 效果？

Question

我正在根据我们公司网站的另一个设计/UI 重新设计一个网站

负责我应该为我的重新设计建模的网站的网络开发人员下周休假，但我想使用他的 UI 效果之一。

我似乎无法弄清楚他使用什么来实现悬停淡入淡出效果，这让我认为他没有使用 CSS3，而是使用了一些 jQuery 库。

编辑:我已经使用 firebug 来尝试找出他们在做什么，但没有成功。

Here这就是我正在看的。它是在右侧边栏中的几个元素上使用的淡入淡出效果。该类是fadehover。

非常感谢帮助诊断这个特定问题，但我真的很想知道我自己将来如何解决类似的问题。

Answer 1

在 main.js(第 223 行)中，我发现它负责悬停:

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

在 fadehover div 中，有类 img-a 和 img-b 的图像。当光标悬停在 img-a 上时，该图像会淡出。所以我假设使用 CSS 将 img-b 放在 img-a 后面。

我就是这样做的:

我使用 Google Chrome，转到resources 选项卡，然后简单地搜索 (ctrl + F/cmd + F) fadehover 类。不幸的是，除了一点 CSS 和 HTML 之外，我找不到任何东西，所以我选择了该 div 中的一个图像的类，结果是这样，宾果!

还有其他方法可以找到答案。如果您检查该元素并用鼠标悬停，您可能会看到 DOM 发生变化。如果你的 DOM 发生了变化，你就知道它是由 javascript 完成的。无论是 jQuery、原型(prototype)还是其他框架都是另一回事。

如果 DOM 没有改变，则可以确定使用了 CSS 转换。除非使用 Flash、SVG 或 HTML5 canvas 元素;)