1

我正在根据我们公司网站的另一个设计/用户界面重新设计一个网站

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

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

编辑：我用萤火虫试图弄清楚他们在做什么但没有成功。

这就是我正在看的。它在右侧边栏中的几个元素上使用了淡入淡出效果。班级是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，它会淡出该图像。所以我假设使用CSSimg-b落后了。img-a

我是这样做的：

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

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

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

于 2012-11-01T10:06:27.870 回答