如何确定网站用于特定 UI 效果的内容？答案

【问题标题】：How to determine what a site is using for specific UI effects?如何确定网站用于特定 UI 效果的内容？
【发布时间】：2012-10-21 21:35:17
【问题描述】：

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

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

我似乎无法弄清楚他在使用什么来实现悬停渐变效果，这让我觉得他使用的不是 CSS3，而是一些 jQuery 库。

编辑：我使用 firebug 尝试弄清楚他们在做什么但没有成功。

Here 是我正在查看的内容。它是在右侧边栏中的几个元素上使用的淡入淡出效果。班级是fadehover。

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

【问题讨论】：

使用getfirebug.com 找到它。
我已经使用 firebug 几年了，但我似乎无法弄清楚他们在这个上做了什么。

标签： jquery css hover css-transitions jquery-hover

【解决方案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 上时，它会淡出该图像。所以我假设 img-b 使用 CSS 放在 img-a 后面。

我就是这样做的：

我使用谷歌浏览器，转到标签resources 并简单地搜索（ctrl + F / cmd + F）fadehover 类。不幸的是，除了一点 CSS 和 HTML，我什么都找不到，所以我选择了该 div 中的一类图像，结果是宾果！

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

如果 DOM 没有改变，您可以确定使用了 CSS 过渡。除非使用 Flash、SVG 或 HTML5 画布元素；)

【讨论】：

很好，但是你是怎么找到的？你搜索了什么？你用了什么？我真的很擅长用 firebug 弄清楚 CSS 效果，但是当它是 jQuery 时，我不知道如何找到它在做什么。
哇太棒了，非常感谢。你知道是否有办法在 firefox (firebug) 中做同样的事情吗？
在萤火虫中，每种语言都有多个选项卡。 HTML、CSS 和脚本。因此，首先您必须知道是否应该查看 CSS 或 Script 选项卡。如果您使用脚本选项卡，您必须首先通过单击箭头启用它，然后单击enable。然后您必须重新加载页面，该页面会加载该选项卡中的所有脚本。然后，您可以搜索您要查找的任何内容。这就是我更喜欢 Chrome 的原因，因为我可以立即搜索所有文件。无论如何，我更喜欢 Chrome 进行调试。