0

浏览Handimania网站时，我意识到当鼠标悬停时标题会跳动。现在我知道这可能是使用 CSS 或 CSS3 完成的样式动画（我对吗？），但我不太确定如何查看源代码。

到目前为止，当一个吸引人的静态网页出现在我面前时，我只需扫描它的html就可以了解它的秘密和见解。现在我发现自己无法以同样的方式处理这些动态内容。到目前为止，我可以说的是，在某个地方，应该有一个名为的类，该类hover依次从 0% 淡化到 100%，然后又回到 0%，在静态灰色图像上具有透明背景的氰基 PNG 标题。

这是我能走的最远

<div id="logo">
<img src="http://www.handimania.com/wp-content/themes/handimania/images/logo.png" alt="Handimania" class="hover"/>
<h1>
<img class="dark" src="http://www.handimania.com/wp-content/themes/handimania/images/logo-dark.png" alt="Handimania"/>
</h1>
<p id="tagline">Guides for Handmade, DIY &amp; Crafts Maniacs</p>
</div>
4

1 回答 1

0

我认为很可能是这段代码：

$('#logo .hover').hover(
    function(e) {
        console.log('enter');
        $('#logo .hover').animate({opacity: 1}, "slow");
        $('#logo .dark').animate({opacity: 0}, "slow");
    },
    function(e) {
        console.log('leave')
        $('#logo .dark').animate({opacity: 1}, "slow");
        $('#logo .hover').animate({opacity: 0}, "slow");
    }
);

它在包含的文件jquery.custom.js?ver=1.0中，显示它是 jQuery 动画，而不是 CSS3 动画。

于 2013-06-18T06:40:12.107 回答