如何确定站点用于特定UI效应的方法

Question

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

重新设计一个网站

负责该网站的网络开发人员我应该在下周休假，但我想使用他的UI效果之一。

我似乎无法弄清楚他正在使用悬停的淡出效果，这使我认为他不使用CSS3，而是一些jQuery库。

编辑：我已经使用Firebug尝试找出他们在没有成功的情况下在做什么。

这是我在看的。它的淡入效果对右侧栏中的几个元素使用。该类是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上时，它会淡出该图像。因此，我认为img-b使用CSS放在img-a后面。

这就是我的方式：

我使用了Google Chrome，转到了TAB resources，然后简单地搜索了fadehover类（CTRL F/CMD F）。不幸的是，除了一点CSS和HTML外，我什么都找不到任何东西，所以我选择了该div中的一类图像，结果bingo！

还有其他方法可以找出答案。如果您检查该元素并用鼠标悬停，则可能会看到您的DOM在改变。如果您的DOM更改，则知道它是由JavaScript完成的。无论是jQuery，原型还是另一个框架是另一个故事。

如果DOM不变，则可以确保使用CSS过渡。除非使用Flash，SVG或HTML5画布元素；）